/* ===== Abogada Taína Oliva — estilos (edición elegante) ===== */
:root{
  --fucsia:#C21E63;
  --fucsia-osc:#9E1650;
  --dorado:#B8894B;
  --dorado-claro:#D8B778;
  --crema:#FBF6F1;
  --crema-2:#F3EAE0;
  --negro:#141110;
  --negro-2:#211C1A;
  --gris:#6a635e;
  --linea:rgba(184,137,75,.35);
  --sombra:0 18px 50px rgba(20,17,16,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Poppins',system-ui,sans-serif;color:var(--negro);background:var(--crema);line-height:1.75;font-weight:300}
h1,h2,h3,h4,.serif{font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;font-weight:600}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1180px,90%);margin:0 auto}
.acento{color:var(--fucsia)}
.eyebrow{display:inline-block;color:var(--dorado);letter-spacing:.32em;text-transform:uppercase;font-size:.72rem;font-weight:500}
.eyebrow::before{content:"";display:inline-block;width:26px;height:1px;background:var(--dorado);vertical-align:middle;margin-right:.6rem}
.icon{display:inline-flex}
.icon svg{width:26px;height:26px;stroke:var(--dorado);fill:none;stroke-width:1.5}

/* ===== Navbar ===== */
.nav{position:sticky;top:0;z-index:50;background:rgba(251,246,241,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.nav .container{display:flex;align-items:center;justify-content:space-between;padding:.7rem 0}
.brand{display:flex;align-items:center;gap:.7rem}
.brand img{width:44px;height:44px;object-fit:contain}
.brand .bn{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.25rem;line-height:1;letter-spacing:.02em}
.brand small{display:block;font-family:'Poppins',sans-serif;font-weight:400;font-size:.58rem;letter-spacing:.28em;color:var(--dorado);text-transform:uppercase;margin-top:2px}
.nav ul{display:flex;gap:1.8rem;list-style:none;align-items:center}
.nav a{font-size:.78rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--negro);position:relative}
.nav a:hover,.nav a.activo{color:var(--fucsia)}
.nav a.activo::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:1px;background:var(--fucsia)}
.nav .btn-nav{border:1px solid var(--negro);padding:.5rem 1.1rem;border-radius:2px}
.nav .btn-nav:hover{background:var(--negro);color:var(--crema)}

/* ===== Botones ===== */
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.9rem 1.8rem;border-radius:2px;font-family:'Poppins',sans-serif;font-weight:400;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;transition:.25s;cursor:pointer;border:1px solid transparent}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
.btn-primario{background:var(--fucsia);color:#fff}
.btn-primario:hover{background:var(--fucsia-osc)}
.btn-oscuro{background:var(--negro);color:var(--crema)}
.btn-oscuro:hover{background:#000}
.btn-borde{background:transparent;border:1px solid var(--dorado);color:var(--negro)}
.btn-borde:hover{background:var(--dorado);color:#fff}
.btn-claro{background:transparent;border:1px solid var(--dorado-claro);color:var(--crema)}
.btn-claro:hover{background:var(--dorado);border-color:var(--dorado);color:#fff}

/* ===== Hero ===== */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center;padding:4.5rem 0}
.hero-txt h1{font-size:clamp(2.6rem,5.4vw,4.4rem);line-height:1.05;margin:1rem 0 1.2rem;font-weight:600}
.hero-txt p{color:var(--gris);font-size:1.05rem;max-width:44ch;font-weight:300}
.hero-txt .lema{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--negro);font-size:1.5rem;margin:1.4rem 0 1.8rem;padding-left:1rem;border-left:2px solid var(--dorado)}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap}
.hero-img{position:relative;padding:14px}
.hero-img img{width:100%;object-fit:cover;aspect-ratio:4/5;position:relative;z-index:1}
.hero-img::after{content:"";position:absolute;inset:0;border:1px solid var(--dorado);transform:translate(16px,16px);z-index:0}

/* ===== Secciones ===== */
.seccion{padding:5rem 0}
.seccion-titulo{text-align:center;margin-bottom:3rem}
.seccion-titulo h2{font-size:clamp(2rem,4.4vw,3rem);margin-top:.6rem;font-weight:600}
.seccion-titulo p{color:var(--gris);max-width:60ch;margin:.8rem auto 0;font-weight:300}
.franja{background:var(--negro);color:var(--crema)}
.franja h1,.franja h2,.franja h3{color:var(--crema)}
.franja p{color:#c9c1bb}
.franja .icon svg{stroke:var(--dorado-claro)}
.hairline{width:60px;height:1px;background:var(--dorado);margin:1rem auto 0}

/* ===== Tarjetas de valor ===== */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.card{background:#fff;padding:2rem 1.8rem;box-shadow:var(--sombra);border-top:2px solid var(--dorado);transition:.25s}
.card:hover{transform:translateY(-4px)}
.card .ico-c{width:56px;height:56px;border:1px solid var(--linea);border-radius:50%;display:grid;place-items:center;margin-bottom:1rem}
.card h3{font-size:1.4rem;margin-bottom:.4rem}
.card p{color:var(--gris);font-size:.95rem;font-weight:300}
.franja .card{background:var(--negro-2);border-top-color:var(--dorado)}
.franja .card p{color:#c9c1bb}

/* ===== Servicios por categoría ===== */
.cat{margin-bottom:3rem}
.cat-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem}
.cat-head .num{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--dorado);border:1px solid var(--dorado);width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none}
.cat-head h3{font-size:1.9rem;font-weight:600}
.cat-head .line{flex:1;height:1px;background:var(--linea)}
.chips{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.chip{padding:1rem 1.2rem;border-bottom:1px solid var(--linea);display:flex;gap:.8rem;align-items:flex-start}
.chip::before{content:"";width:7px;height:7px;background:var(--fucsia);transform:rotate(45deg);margin-top:.55rem;flex:none}
.chip b{font-weight:500;font-size:1rem}
.chip small{display:block;font-weight:300;color:var(--gris);font-size:.85rem}

/* ===== Sobre mí ===== */
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:3.5rem;align-items:center}
.split .marco{position:relative;padding:14px}
.split .marco img{aspect-ratio:4/5;object-fit:cover;width:100%;position:relative;z-index:1}
.split .marco::after{content:"";position:absolute;inset:0;border:1px solid var(--dorado);transform:translate(-16px,16px)}
.split .txt p{color:var(--gris);margin-bottom:1rem;font-weight:300}
.split .txt p,.timeline p,.bio-just p{text-align:justify;hyphens:none;-webkit-hyphens:none;word-break:normal;overflow-wrap:break-word}
@media(max-width:560px){.split .txt p,.timeline p,.bio-just p{text-align:left}}
.datos{display:flex;gap:2.5rem;flex-wrap:wrap;margin:1.8rem 0;padding:1.4rem 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.dato .n{font-family:'Cormorant Garamond',serif;font-size:2.4rem;color:var(--fucsia);font-weight:600;line-height:1}
.dato .l{font-size:.8rem;color:var(--gris);letter-spacing:.05em}

/* ===== Trayectoria (timeline) ===== */
.timeline{max-width:820px;margin:0 auto}
.tl-item{display:grid;grid-template-columns:170px 1fr;gap:1.5rem;padding:1.4rem 0;border-bottom:1px solid var(--linea)}
.tl-item .yr{font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:var(--dorado)}
.tl-item h4{font-size:1.25rem;font-weight:600;margin-bottom:.2rem}
.tl-item .org{color:var(--fucsia);font-size:.9rem;margin-bottom:.4rem}
.tl-item p{color:var(--gris);font-size:.92rem;font-weight:300}
.franja .tl-item{border-color:rgba(216,183,120,.2)}
.franja .tl-item p{color:#c9c1bb}

/* ===== Formación ===== */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.form-item{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 0;border-bottom:1px solid var(--linea)}
.form-item .icon svg{width:20px;height:20px}
.form-item b{font-weight:500;display:block}
.form-item span{color:var(--gris);font-size:.88rem;font-weight:300}

/* ===== Contacto ===== */
.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.contacto-lista{list-style:none;display:flex;flex-direction:column}
.contacto-lista li{display:flex;align-items:center;gap:1.1rem;padding:1.1rem 0;border-bottom:1px solid var(--linea)}
.contacto-lista .ico-c{width:48px;height:48px;border:1px solid var(--linea);border-radius:50%;display:grid;place-items:center;flex:none}
.contacto-lista b{display:block;font-weight:500}
.contacto-lista span{color:var(--gris);font-size:.9rem;font-weight:300}
.tarjeta-qr{background:var(--negro);color:var(--crema);padding:2.4rem;text-align:center;box-shadow:var(--sombra)}
.tarjeta-qr img.qr{width:200px;height:200px;background:#fff;padding:12px;margin:1.2rem auto}
.tarjeta-qr .lema{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--dorado-claro);font-size:1.3rem;margin:.4rem 0 1rem}

/* ===== CTA banda ===== */
.cta-banda{text-align:center;padding:4.5rem 0}
.cta-banda h2{font-size:clamp(1.9rem,4vw,2.8rem);margin-bottom:.6rem}
.cta-banda p{margin-bottom:1.8rem}

/* ===== Footer ===== */
.footer{background:#0e0c0b;color:#a89f98;padding:3rem 0 1.6rem;text-align:center}
.footer .brand{justify-content:center}
.footer .bn{color:var(--crema)}
.footer p{margin-top:.8rem;font-weight:300;font-size:.92rem}
.footer .redes{display:flex;gap:.8rem;justify-content:center;margin:1.2rem 0}
.footer .redes a{width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(216,183,120,.35);border-radius:50%;transition:.25s}
.footer .redes a svg{width:18px;height:18px;stroke:var(--dorado-claro);fill:none;stroke-width:1.6}
.footer .redes a:hover{background:var(--fucsia);border-color:var(--fucsia)}
.footer .redes a:hover svg{stroke:#fff}
.footer small{display:block;color:#6f6862;margin-top:1rem;font-size:.78rem;font-weight:300}

/* ===== WhatsApp flotante ===== */
.wa-float{position:fixed;right:22px;bottom:22px;background:#128C7E;color:#fff;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.3);z-index:60;transition:.25s}
.wa-float svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.8}
.wa-float:hover{transform:scale(1.08);background:#0f766b}

/* ===== Responsive ===== */
@media(max-width:880px){
  .hero,.split,.contacto-grid{grid-template-columns:1fr}
  .hero-img{order:-1;max-width:420px;margin:0 auto}
  .grid-3,.chips,.form-grid{grid-template-columns:1fr}
  .split .marco{max-width:420px;margin:0 auto}
  .tl-item{grid-template-columns:1fr;gap:.3rem}
  .nav ul{gap:1rem}
  .nav .brand small{display:none}
}
@media(max-width:560px){
  .nav ul{flex-wrap:wrap;justify-content:center;gap:.8rem}
  .seccion{padding:3.2rem 0}
}

/* ===== Portada: nombre protagonista ===== */
.hero-txt h1.nombre{font-size:clamp(2.8rem,6vw,5rem);line-height:1;margin:.6rem 0 .4rem;letter-spacing:.01em}
.hero-txt h1.nombre .ape{display:block;color:var(--dorado)}
.hero-txt .rol{font-size:1.05rem;color:var(--gris);max-width:46ch;margin-top:.4rem}
.hero-txt .titulo-pro{font-family:'Cormorant Garamond',serif;font-size:clamp(1.5rem,3.2vw,2.15rem);color:var(--fucsia);font-weight:600;margin:.15rem 0 .7rem;line-height:1.15}
.contacto-rapido{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--linea)}
.contacto-rapido a{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--negro);font-weight:400}
.contacto-rapido a svg{width:18px;height:18px;stroke:var(--dorado);fill:none;stroke-width:1.6}
.contacto-rapido a:hover{color:var(--fucsia)}
.contacto-rapido a:hover svg{stroke:var(--fucsia)}
.badge-online{display:inline-flex;align-items:center;gap:.55rem;background:rgba(194,30,99,.1);color:var(--fucsia);border:1px solid rgba(194,30,99,.3);padding:.45rem 1rem;border-radius:999px;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.badge-online::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--fucsia);box-shadow:0 0 0 3px rgba(194,30,99,.18)}

/* ===== Enlaces útiles ===== */
.enlaces{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.enlace{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--linea);padding:1.1rem 1.2rem;transition:.25s}
.enlace:hover{border-color:var(--fucsia);transform:translateY(-3px);box-shadow:var(--sombra)}
.enlace .ico-c{width:44px;height:44px;border:1px solid var(--linea);border-radius:50%;display:grid;place-items:center;flex:none}
.enlace .ico-c svg{width:22px;height:22px;stroke:var(--dorado);fill:none;stroke-width:1.5}
.enlace b{font-weight:500;font-size:.95rem;display:block;line-height:1.2}
.enlace span{font-size:.78rem;color:var(--gris);font-weight:300}
.enlace .arw{margin-left:auto;color:var(--dorado);font-size:1.1rem}
@media(max-width:880px){.enlaces{grid-template-columns:1fr}}

/* ===== Servicios clicables + modal ===== */
button.chip{cursor:pointer;font-family:inherit;color:inherit;background:transparent;width:100%;align-items:center}
button.chip:hover{background:var(--crema-2)}
button.chip .txt-s{flex:1}
button.chip .mas{color:var(--dorado);font-size:1.2rem;margin-left:.5rem}
.modal{position:fixed;inset:0;background:rgba(20,17,16,.62);display:none;place-items:center;z-index:100;padding:1.2rem}
.modal.open{display:grid}
.modal-box{background:var(--crema);max-width:560px;width:100%;padding:2.6rem;position:relative;box-shadow:var(--sombra);border-top:3px solid var(--fucsia);animation:pop .2s ease}
@keyframes pop{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.modal-box h3{font-size:2rem;margin:.3rem 0 .2rem}
.modal-box .cerrar{position:absolute;top:.9rem;right:1.2rem;font-size:1.8rem;cursor:pointer;color:var(--gris);background:none;border:none;line-height:1}
.badge-med{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .9rem;border-radius:2px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;margin:.8rem 0 .4rem;font-weight:500}
.badge-med::before{content:"";width:8px;height:8px;border-radius:50%}
.badge-med.si{background:rgba(194,30,99,.1);color:var(--fucsia);border:1px solid rgba(194,30,99,.3)}
.badge-med.si::before{background:var(--fucsia)}
.badge-med.no{background:rgba(184,137,75,.12);color:#8a6a32;border:1px solid var(--linea)}
.badge-med.no::before{background:var(--dorado)}
.modal-box .med-nota{font-size:.85rem;color:var(--gris);font-weight:300;margin-bottom:1rem}
.modal-box p.desc{color:var(--negro);font-weight:300;margin:.6rem 0 1.6rem;line-height:1.7}