:root{ --verde:#0B3B2E; --verde-2:#134A3A; --verde-hondo:#082A20; --papel:#F5F7F5; --papel-2:#EBEFEC; --tinta:#111A17; --tinta-2:#46534E; --linea:rgba(17,26,23,.14); --bronce:#9C7A45; --claro:#EFF3F0; --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --rail:272px; --alto-cab:68px; --ancho:1500px; --ancho-plan:640px; } *{box-sizing:border-box} html,body{margin:0;padding:0} html{background:var(--verde-hondo)} body{background:var(--papel);color:var(--tinta);font-family:var(--sans);font-weight:300; -webkit-font-smoothing:antialiased;line-height:1.6} h1,h2,h3,h4{font-family:var(--serif);font-weight:400;text-wrap:balance;margin:0} a{color:inherit;text-decoration:none} .medida{max-width:1180px;margin:0 auto;padding:0 44px} /* ---------- buscador ---------- */ .buscador{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:7px 7px 7px 24px; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);max-width:640px} .buscador input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:inherit; font-size:16.5px;font-family:var(--sans);font-weight:300;padding:13px 0} /* min-width:0 es lo que arregla el desborde: sin eso el campo se planta en su ancho natural, no achica, y el boton Buscar se va de la pantalla. El texto nunca baja de 16px porque abajo de eso el celular hace zoom solo al tocar el campo y descoloca la pagina entera. */ @media(max-width:520px){ .buscador{padding:6px 6px 6px 16px;gap:8px} .buscador input{font-size:16px;padding:11px 0} .buscador button{padding:11px 17px;font-size:14.5px} } .buscador input::placeholder{color:rgba(239,243,240,.55)} .buscador button{border:0;border-radius:999px;background:var(--claro);color:var(--verde); padding:13px 30px;font-size:15px;cursor:pointer;font-family:var(--sans)} .btn-fino{padding:10px 20px;border-radius:999px;font-size:14.5px;border:1px solid rgba(255,255,255,.42); background:rgba(255,255,255,.1);color:inherit;cursor:pointer;font-family:var(--sans);font-weight:300; transition:background .2s;white-space:nowrap} .btn-fino:hover{background:rgba(255,255,255,.2)} .marca{font-family:var(--serif);font-size:22px;letter-spacing:.01em} /* ---------- fichas de situacion ---------- */ .fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:12px;margin-top:30px;max-width:1040px} .ficha{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:11px; padding:17px 19px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;transition:background .2s} .ficha:hover{background:rgba(255,255,255,.16)} .ficha b{display:block;font-family:var(--serif);font-weight:400;font-size:17.5px;margin-bottom:5px} .ficha span{font-size:13px;color:rgba(239,243,240,.65);line-height:1.55} /* ---------- credenciales ---------- */ .credenciales{display:flex;gap:56px;flex-wrap:wrap} .credenciales div strong{display:block;font-family:var(--serif);font-weight:400;font-size:27px;margin-bottom:4px} .credenciales div span{font-size:13.5px;color:rgba(239,243,240,.62);line-height:1.55;max-width:34ch;display:block} /* ---------- pie ---------- */ .pie{background:var(--verde-hondo);color:rgba(239,243,240,.66);padding:34px 0} /* en el celular la botonera de contacto queda fija abajo de todo y se comia la ultima linea del pie: el enlace al aviso legal quedaba debajo de la barra y no se podia tocar nunca. El pie le deja el lugar. La medida no es al ojo: son las DOS filas de la botonera ("Primera entrevista sin cargo" mas la pastilla), 108px medidos en pantalla, mas los 12px que la separan del borde, mas un respiro. Si alguna vez se le agrega una tercera fila hay que volver a medir. */ @media(max-width:620px){.pie{padding-bottom:140px}} .pie .medida{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:center} .pie .legal{font-size:12.5px;line-height:1.7;max-width:70ch} /* El mapa del pie: los caminos que el menu lateral esconde en el celular. */ .pie-mapa{display:flex;flex-wrap:wrap;gap:6px 22px;margin:26px 0 0; padding-top:20px;border-top:1px solid rgba(255,255,255,.13);flex-basis:100%} .pie-mapa a{font-size:13.5px;color:rgba(239,243,240,.78)} .pie-mapa a:hover{color:var(--claro)} .pie .legal b{color:rgba(239,243,240,.9);font-weight:400} /* La fecha va al final del contenido, discreta. No es una advertencia: es la senal de que alguien lo mantiene. Por eso va en gris y chica, no en un recuadro. */ .sello-fecha{max-width:var(--ancho);margin:34px auto 0;padding:0 40px; font-size:12.5px;color:var(--tinta-2);opacity:.72; font-variant-numeric:tabular-nums} @media(max-width:900px){.sello-fecha{padding:0 20px}} /* El alcance va SOLO en el pie, nunca en el cuerpo de la pagina: abajo se lee como formalidad, arriba se leeria como que dudamos de lo escrito. flex-basis:100% para que baje a su propio renglon dentro del pie. */ .pie .pie-alcance{flex:1 1 100%;margin:22px 0 0;padding-top:16px; border-top:1px solid rgba(239,243,240,.16); font-size:12px;line-height:1.65;max-width:96ch;color:rgba(239,243,240,.5)} /* Tiene que LEERSE como un enlace: el pie apaga el subrayado de todos los , asi que aca hay que devolverselo y ademas separarlo del parrafo, porque a media opacidad un subrayado fino no se ve. */ .pie .pie-alcance a{display:inline-block;margin-left:6px; color:#fff;font-weight:600; text-decoration:underline;text-decoration-thickness:1.5px; text-underline-offset:3px;white-space:nowrap} .pie .pie-alcance a:hover, .pie .pie-alcance a:focus-visible{text-decoration-thickness:2.5px} /* ================= D — cabecera fija + barra lateral ================= */ .cabecera{position:fixed;top:0;left:0;right:0;height:var(--alto-cab);z-index:60; display:flex;align-items:center;justify-content:space-between;padding:0 40px; background:var(--verde-hondo);border-bottom:1px solid rgba(255,255,255,.1);color:var(--claro)} .cabecera nav{display:flex;gap:30px;align-items:center;font-size:14.5px} .cabecera nav a{color:rgba(239,243,240,.84)} .cabecera nav a:hover{color:var(--claro)} .d-shell{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh;padding-top:var(--alto-cab)} .d-rail{background:var(--verde-hondo);border-right:1px solid rgba(255,255,255,.09); padding:26px 0 34px;color:var(--claro); position:sticky;top:var(--alto-cab);height:calc(100vh - var(--alto-cab));overflow-y:auto; scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent} .d-rail::-webkit-scrollbar{width:7px} .d-rail::-webkit-scrollbar-track{background:transparent} .d-rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px} .d-rail::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28)} .d-rail h4{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:rgba(239,243,240,.4);margin:0 0 11px;padding:0 26px} .d-rail nav{display:flex;flex-direction:column;margin-bottom:6px} .d-rail nav a{padding:9px 26px;font-size:14.5px;color:rgba(239,243,240,.86); border-left:2px solid transparent;transition:background .18s,border-color .18s} .d-rail nav a:hover{background:rgba(255,255,255,.08);border-left-color:var(--bronce)} .d-rail nav a small{display:block;font-size:11.5px;color:rgba(239,243,240,.4);margin-top:1px} .d-rail .sep{height:1px;background:rgba(255,255,255,.1);margin:20px 26px} .d-main{background:var(--verde);color:var(--claro);display:flex;flex-direction:column} .d-hero{padding:74px 44px 62px;flex:1} .d-hero h1{font-size:clamp(34px,3.6vw,52px);line-height:1.12;letter-spacing:-.015em;max-width:19ch} .d-hero .bajada{font-size:18px;line-height:1.7;color:rgba(239,243,240,.74);margin:20px 0 40px;max-width:52ch} .d-preg{font-family:var(--serif);font-size:20px;margin:0 0 15px;color:rgba(239,243,240,.92)} .d-cred{background:rgba(0,0,0,.17);border-top:1px solid rgba(255,255,255,.1);padding:34px 44px} /* Quien atiende. Va arriba de las cuatro credenciales, separado por una linea fina: es una frase, no una pastilla mas. Puesto el 3/9/2026. */ .quien-atiende{font-size:15px;line-height:1.72;color:rgba(239,243,240,.78); margin:0 0 26px;padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.09)} .quien-atiende b{color:rgba(239,243,240,.95);font-weight:600} @media(max-width:900px){ .quien-atiende{font-size:14.5px;margin-bottom:22px;padding-bottom:20px} } /* ================= A — institucional ================= */ .a-top{background:var(--verde);color:var(--claro);border-bottom:1px solid rgba(255,255,255,.13)} .a-top .medida{display:flex;justify-content:space-between;align-items:center;padding-top:22px;padding-bottom:22px} .a-top nav{display:flex;gap:30px;align-items:center;font-size:14.5px} .a-hero{background:var(--verde);color:var(--claro);padding:104px 0 96px;text-align:center} .a-hero h1{font-size:clamp(36px,4.4vw,60px);line-height:1.1;letter-spacing:-.018em;max-width:17ch;margin:0 auto} .a-hero .bajada{margin:26px auto 44px;font-size:18.5px;line-height:1.7;color:rgba(239,243,240,.76);max-width:58ch} .a-hero .buscador{margin:0 auto} .a-pistas{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;font-size:13.5px} .a-pistas span{padding:8px 17px;border-radius:999px;border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.06);color:rgba(239,243,240,.86)} .a-areas{padding:86px 0 96px} .a-areas h2{font-size:15px;letter-spacing:.18em;text-transform:uppercase;font-family:var(--sans); font-weight:500;color:var(--tinta-2);margin-bottom:34px} .a-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px; background:var(--linea);border:1px solid var(--linea)} .a-grid article{background:var(--papel);padding:32px 30px 34px} .a-grid h3{font-size:21px;margin-bottom:10px} .a-grid p{margin:0;font-size:14.5px;line-height:1.65;color:var(--tinta-2)} .a-cred{background:var(--verde-2);color:var(--claro);padding:52px 0} /* ================= C — directa ================= */ .c-top{background:var(--verde-2);color:var(--claro);border-bottom:1px solid rgba(255,255,255,.12)} .c-top .medida{display:flex;justify-content:space-between;align-items:center;padding-top:22px;padding-bottom:22px} .c-top nav{display:flex;gap:30px;align-items:center;font-size:14.5px} .c-hero{background:var(--verde-2);color:var(--claro);padding:92px 0 86px} .c-hero h1{font-size:clamp(36px,4.6vw,60px);line-height:1.1;margin-bottom:16px} .c-hero .bajada{font-size:18px;color:rgba(239,243,240,.74);margin:0 0 40px;line-height:1.68;max-width:56ch} .c-cta{background:var(--verde);color:var(--claro);padding:46px 0} .c-cta .medida{display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap} .c-cta strong{font-family:var(--serif);font-weight:400;font-size:21px;display:block;margin-bottom:4px} .c-cta span{font-size:14px;color:rgba(239,243,240,.66)} /* ---------- cambiador de version ---------- */ .switch{position:fixed;right:18px;bottom:18px;z-index:99;display:flex;gap:6px; background:rgba(8,42,32,.92);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .switch a{padding:8px 15px;border-radius:999px;font-size:13px;color:rgba(239,243,240,.72);letter-spacing:.02em} .switch a.on{background:var(--claro);color:var(--verde)} .switch a:hover{color:var(--claro)} @media(max-width:900px){ .medida{padding:0 24px} .d-shell{grid-template-columns:1fr} .d-rail{display:none} .cabecera{padding:0 24px} .cabecera nav a{display:none} .d-hero,.d-cred{padding-left:24px;padding-right:24px} .a-top nav,.c-top nav{display:none} } /* ================= hero con foto AL LADO ================= */ .hero-foto{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px); gap:24px;align-items:end;padding:70px 0 0 44px;flex:1;position:relative;overflow:hidden} .hf-texto{padding-bottom:56px;max-width:660px} .hf-texto h1{font-size:clamp(32px,3.3vw,48px);line-height:1.12;letter-spacing:-.015em;max-width:19ch} .hf-texto .bajada{font-size:17.5px;line-height:1.7;color:rgba(239,243,240,.74);margin:18px 0 34px;max-width:50ch} .hf-texto .fichas{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));max-width:700px} .hf-figura{position:relative;align-self:end;line-height:0} .hf-figura img{width:100%;height:auto;display:block; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%,#000 100%); mask-image:linear-gradient(to right,transparent 0,#000 22%,#000 100%)} .hf-figura::after{content:"";position:absolute;inset:auto 0 0 0;height:120px; background:linear-gradient(to top,var(--verde),transparent);pointer-events:none} @media(max-width:1150px){.hero-foto{grid-template-columns:1fr}.hf-figura{display:none} .hf-texto{padding-bottom:40px}.hero-foto{padding-right:44px}} /* ================= hero con foto AL FONDO ================= */ .hero-fondo{position:relative;flex:1;padding:44px 44px 58px;overflow:hidden} .hb-figura{position:absolute;right:-2%;bottom:0;width:min(46%,560px);line-height:0;z-index:0; opacity:.14;pointer-events:none;user-select:none} .hb-figura img{width:100%;height:auto;display:block; -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 62%,transparent 96%); mask-image:linear-gradient(to bottom,#000 0,#000 62%,transparent 96%)} .hb-texto{position:relative;z-index:1} .hb-texto h1{font-size:clamp(32px,3.2vw,46px);line-height:1.12;letter-spacing:-.015em;max-width:19ch} .hb-texto .bajada{font-size:18px;line-height:1.7;color:rgba(239,243,240,.74);margin:18px 0 38px;max-width:74ch} .hb-texto .fichas{max-width:800px} @media(max-width:1000px){.hb-figura{display:none}} /* ---------- seis fichas simetricas + la urgente ---------- */ .fichas.seis{grid-template-columns:repeat(3,minmax(0,1fr));max-width:880px} @media(max-width:1240px){.fichas.seis{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){.fichas.seis{grid-template-columns:1fr}} /* ---------- franja de guardia ---------- */ .guardia{background:var(--verde-hondo);border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1);color:var(--claro)} .g-in{padding:30px 44px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap} .g-txt{position:relative;padding-left:26px;max-width:none} .g-txt h2{font-size:23px;margin-bottom:6px} .g-txt p{margin:0;font-size:15px;line-height:1.65;color:rgba(239,243,240,.7)} .g-punto{position:absolute;left:0;top:11px;width:10px;height:10px;border-radius:50%; background:#7FCB9B;box-shadow:0 0 0 0 rgba(127,203,155,.6);animation:latido 2.4s ease-out infinite} @keyframes latido{0%{box-shadow:0 0 0 0 rgba(127,203,155,.55)}70%{box-shadow:0 0 0 13px rgba(127,203,155,0)}100%{box-shadow:0 0 0 0 rgba(127,203,155,0)}} @media(prefers-reduced-motion:reduce){.g-punto{animation:none}} .g-tel{font-family:var(--serif);font-size:29px;letter-spacing:.01em;white-space:nowrap; padding:12px 26px;border:1px solid rgba(255,255,255,.3);border-radius:999px;transition:background .2s} .g-tel:hover{background:rgba(255,255,255,.12)} /* ---------- franja de areas, en claro ---------- */ .areas-band{background:var(--papel);color:var(--tinta);padding:64px 44px 70px} .areas-band h2{font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.18em; text-transform:uppercase;color:var(--tinta-2);margin-bottom:30px} /* columnas fijas por tramo: hacen falta para que la tarjeta verde pueda ocupar exactamente el hueco que sobra, sin dejar celdas vacias */ .ab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:1120px} @media(min-width:1200px){.ab-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(min-width:1480px){.ab-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:620px){.ab-grid{grid-template-columns:1fr}} .ab-grid article{background:var(--papel);border:1px solid var(--linea);border-radius:10px; padding:26px 26px 28px;display:flex;flex-direction:column} .ab-grid h3{font-size:21px;margin-bottom:9px} .ab-grid p{margin:0;font-size:14.5px;line-height:1.65;color:var(--tinta-2)} /* la franja de credenciales ahora lleva cuatro */ @media(max-width:900px){ .g-in{padding:26px 24px}.areas-band{padding:48px 24px 54px}.g-tel{font-size:24px} } /* ---------- guardia arriba de todo ---------- */ .guardia.arriba{border-top:0} .guardia.arriba .g-in{padding:13px 44px;gap:24px} .guardia.arriba .g-txt{padding-left:24px;max-width:none;flex:1} .guardia.arriba .g-txt h2{font-size:18.5px;margin-bottom:2px} .guardia.arriba .g-txt p{font-size:13.5px;line-height:1.5} .guardia.arriba .g-punto{top:7px;width:9px;height:9px} .guardia.arriba .g-tel{font-size:22px;padding:8px 20px} @media(max-width:900px){.guardia.arriba .g-in{padding:20px 24px}.guardia.arriba .g-tel{font-size:22px}} /* ---------- destello que recorre el titulo de la guardia ---------- */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ .guardia .g-txt h2{ background-image:linear-gradient(105deg, rgba(239,243,240,.62) 0%, rgba(239,243,240,.62) 30%, #FFF6DF 42%, #FFFFFF 50%, #FFF6DF 58%, rgba(239,243,240,.62) 70%, rgba(239,243,240,.62) 100%); background-size:210% 100%; background-position:150% 0; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; animation:destello 3.4s ease-in-out infinite} } @keyframes destello{ 0%{background-position:150% 0} 70%{background-position:-50% 0} 100%{background-position:-50% 0} } @media(prefers-reduced-motion:reduce){ .guardia .g-txt h2{animation:none;background-position:50% 0} } /* ---------- franja de guardia en un solo renglon ---------- */ .guardia.arriba .g-in{padding:11px 44px;gap:22px;flex-wrap:nowrap} .g-linea{display:flex;align-items:center;gap:13px;margin:0;flex-wrap:wrap;min-width:0} .g-linea .g-punto{position:static;flex:none;width:9px;height:9px;top:auto;left:auto} .g-linea h2{font-size:18px;margin:0;white-space:nowrap} .g-sep{flex:none;width:1px;height:17px;background:rgba(255,255,255,.26)} .g-dice{font-size:14px;line-height:1.45;color:rgba(239,243,240,.72)} .guardia.arriba .g-tel{font-size:21px;padding:7px 19px;flex:none} @media(max-width:1100px){.guardia.arriba .g-in{flex-wrap:wrap;gap:12px}} @media(max-width:900px){.guardia.arriba .g-in{padding:12px 24px}.g-linea h2{font-size:16.5px}} /* ---------- tarjeta de llamado a la accion ---------- */ .ab-grid article.ab-cta{background:var(--verde);border-color:var(--verde);color:var(--claro); position:relative;overflow:hidden;padding:0} .cta-txt{position:relative;z-index:1;display:flex;flex-direction:column;flex:1; padding:26px 26px 28px} .cta-foto{display:none} .ab-cta h3{color:var(--claro)} .ab-cta p{color:rgba(239,243,240,.74) !important} .ab-boton{margin-top:auto;padding-top:16px;font-size:14.5px;color:var(--claro); display:inline-flex;align-items:center;gap:8px} .ab-boton::after{content:"→";font-size:17px;line-height:1;transition:transform .2s} .ab-cta:hover .ab-boton::after{transform:translateX(4px)} /* desde 3 columnas la tarjeta verde se estira sobre el hueco que sobra y la doctora entra del lado derecho, adentro de la tarjeta */ @media(min-width:1200px){ .ab-grid article.ab-cta{grid-column:span 3;flex-direction:row;align-items:stretch;min-height:292px} .cta-txt{justify-content:center;padding:34px 14px 34px 38px} .ab-cta h3{font-size:27px;line-height:1.18;margin-bottom:13px;max-width:21ch} .ab-cta p{font-size:15.5px;line-height:1.72;max-width:54ch} .ab-boton{margin-top:24px;padding-top:0;font-size:15px} .cta-foto{display:block;flex:none;align-self:stretch;width:min(34%,318px); position:relative;pointer-events:none;user-select:none} .cta-foto img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:56% 16%; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 19%,#000 100%); mask-image:linear-gradient(to right,transparent 0,#000 19%,#000 100%)} } /* ================= ajustes finos ================= */ /* credenciales en grilla pareja: cada titulo y su bajada arrancan sobre el mismo borde y ninguna columna queda apretada contra su texto */ .d-cred .credenciales{display:grid;grid-template-columns:1.55fr 1fr 1fr 1fr; gap:40px;align-items:start;text-align:left} .d-cred .credenciales div{min-width:0} .d-cred .credenciales div strong{font-size:25px;line-height:1.2} .d-cred .credenciales div span{max-width:none} @media(max-width:1440px){.d-cred .credenciales{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 40px}} @media(max-width:640px){.d-cred .credenciales{grid-template-columns:1fr;gap:24px}} /* cabecera: la marca, el rubro y el nombre de la doctora */ .marca-bloque{display:flex;align-items:center;gap:20px;min-width:0} .marca-al{display:flex;align-items:baseline;gap:16px;white-space:nowrap; padding:4px 0 4px 20px;border-left:1px solid rgba(255,255,255,.2)} .ma-tipo{font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:rgba(239,243,240,.52)} .ma-dra{font-size:13.5px;color:rgba(239,243,240,.76)} @media(max-width:1380px){.marca-al{display:none}} /* la guardia, sola y entera en el ultimo renglon del pie */ .pie-guardia{display:inline-block;white-space:nowrap;margin-top:7px;color:rgba(239,243,240,.9)} /* la doctora en la tarjeta verde: girada hacia el texto y mas discreta */ @media(min-width:1200px){ .cta-foto img{opacity:.34;transform:scaleX(-1); -webkit-mask-image:linear-gradient(to left,transparent 0,#000 19%,#000 100%); mask-image:linear-gradient(to left,transparent 0,#000 19%,#000 100%)} } /* biblioteca de fondo en la tarjeta verde: textura, no foto. va en duotono verde y muy baja, entrando desde la derecha para que el lado del texto quede limpio y siga leyendose bien */ .ab-cta::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:image-set(url(/img/bib-verde.webp) type('image/webp'), url(/img/bib-verde.jpg) type('image/jpeg')) center/cover no-repeat;opacity:.18; -webkit-mask-image:linear-gradient(100deg,transparent 0,rgba(0,0,0,.42) 34%,#000 92%); mask-image:linear-gradient(100deg,transparent 0,rgba(0,0,0,.42) 34%,#000 92%)} .ab-cta .cta-foto{z-index:1} .ab-cta .cta-txt{z-index:2} /* telefono del estudio: centrado y en blanco para que sea el destacado. este es el numero al que hay que llamar; el de la franja es solo guardia penal */ .tel-estudio{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); display:inline-flex;align-items:center;gap:9px;white-space:nowrap; background:#fff;color:var(--verde);border-radius:999px;padding:9px 19px 9px 16px; transition:background .18s,box-shadow .18s} /* ── el icono de WhatsApp ────────────────────────────────────────── Va a pleno, sin atenuar: el resto de los iconos del sitio son grises y discretos a proposito, pero este tiene que gritar de que aplicacion es. Por eso trae su verde propio y no hereda el color del texto. */ .ico-wa{flex:none} .tel-estudio svg{flex:none;opacity:1} /* Los botones de cierre no tenian separacion declarada: sin esto el icono queda pegado a la palabra. La pastilla ya trae la suya mas abajo y no se toca, que si no una regla pisa a la otra. */ .boton-lleno,.boton-vacio{gap:9px} .c-rot .ico-wa{margin-right:1px} .te-num{font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.01em} .tel-estudio:hover{background:var(--claro);box-shadow:0 0 0 4px rgba(255,255,255,.14)} @media(max-width:1120px){.tel-estudio{padding:7px 15px 7px 13px}.te-num{font-size:14.5px}} @media(max-width:620px){.tel-estudio{padding:6px 13px 6px 11px;gap:7px}.te-num{font-size:13.5px}} /* de aca para abajo el telefono se achica, pero NO se esconde: es la forma de contacto del estudio y en el celular es donde mas se usa. */ @media(max-width:430px){.tel-estudio{padding:5px 11px 5px 9px;gap:6px}.te-num{font-size:13px}} @media(max-width:359px){.tel-estudio svg{display:none}.tel-estudio{padding:5px 10px}} /* la doctora, corrida contra el margen derecho y con menos biblioteca encima */ @media(min-width:1200px){ .cta-foto img{transform:scaleX(-1) translateX(-40px)} .ab-cta::before{ -webkit-mask-image:linear-gradient(100deg,transparent 0,rgba(0,0,0,.42) 34%,#000 66%,rgba(0,0,0,.5) 100%); mask-image:linear-gradient(100deg,transparent 0,rgba(0,0,0,.42) 34%,#000 66%,rgba(0,0,0,.5) 100%)} } /* rotulo que da contexto a la pregunta de la tarjeta */ .cta-rot{display:block;font-family:var(--sans);font-size:11.5px;font-weight:400; letter-spacing:.16em;text-transform:uppercase;color:rgba(239,243,240,.55);margin-bottom:12px} /* la doctora, un poco mas presente que el parante de la biblioteca */ @media(min-width:1200px){ .cta-foto img{opacity:.46} .ab-cta::before{opacity:.15; -webkit-mask-image:linear-gradient(100deg,transparent 0,rgba(0,0,0,.4) 32%,#000 62%,rgba(0,0,0,.34) 100%); mask-image:linear-gradient(100deg,transparent 0,rgba(0,0,0,.4) 32%,#000 62%,rgba(0,0,0,.34) 100%)} } /* boton de menu: solo aparece cuando la barra lateral no entra en pantalla */ .menu-btn{display:none;background:none;border:0;color:var(--claro);cursor:pointer; padding:8px;margin:0 6px 0 -8px;border-radius:9px;line-height:0} .menu-btn:hover{background:rgba(255,255,255,.1)} .velo{display:none} @media(max-width:900px){ .menu-btn{display:inline-flex;align-items:center} /* la barra lateral no desaparece: pasa a ser un panel que entra desde la izquierda */ .d-rail{display:block;position:fixed;top:var(--alto-cab);left:0;bottom:0;height:auto; width:min(82vw,304px);z-index:58;transform:translateX(-101%); transition:transform .26s ease;border-right:1px solid rgba(255,255,255,.13)} body.menu-abierto .d-rail{transform:none} .velo{display:block;position:fixed;inset:var(--alto-cab) 0 0 0;z-index:57; background:rgba(0,0,0,.52);opacity:0;pointer-events:none;transition:opacity .26s} body.menu-abierto .velo{opacity:1;pointer-events:auto} /* doble cierre a proposito: el JS apaga el velo con el atributo hidden, y el atributo pierde contra un display de hoja de estilo. Con esta segunda regla, aunque el JS y la clase se desincronicen, el velo apagado nunca puede tapar un enlace de la pagina. */ .velo[hidden]{pointer-events:none} body.menu-abierto{overflow:hidden} } @media(prefers-reduced-motion:reduce){.d-rail,.velo{transition:none}} /* botonera de contacto: fija en todas las paginas. el conmutador de maquetas se corre a la izquierda para no pisarla */ .switch{left:18px;right:auto} .pastilla{position:fixed;right:18px;bottom:18px;z-index:99;display:flex;gap:5px;padding:6px; background:rgba(8,42,32,.93);border:1px solid rgba(255,255,255,.15);border-radius:999px; -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px); box-shadow:0 8px 26px rgba(0,0,0,.3)} .pastilla a{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px; font-size:13.5px;color:rgba(239,243,240,.84);white-space:nowrap;transition:background .16s,color .16s} .pastilla a:hover{background:rgba(255,255,255,.11);color:var(--claro)} .pastilla a.destacado{background:var(--claro);color:var(--verde)} .pastilla a.destacado:hover{background:#fff} @media(max-width:620px){ .pastilla{left:12px;right:12px;bottom:12px;justify-content:center} .pastilla a{padding:10px 13px;font-size:13px} .switch{display:none} } /* ================= comportamiento por tamanio de pantalla ================= */ /* 1. cabecera en tres columnas reales: el telefono no puede pisar ni la marca ni el menu, pase lo que pase con el ancho */ .cabecera{display:grid;grid-template-columns:1fr auto 1fr;gap:16px} .cabecera nav{justify-self:end} .marca-bloque{justify-self:start} .tel-estudio{position:static;transform:none;justify-self:center} .tel-estudio:hover{transform:none} /* de 900 para abajo el menu de arriba no muestra ningun enlace, asi que el contenedor se esconde entero: si quedara en la grilla ocuparia una columna vacia y empujaria al telefono fuera de su fila. */ @media(max-width:900px){.cabecera nav{display:none}} @media(max-width:700px){ /* al irse el menu queda libre toda la derecha de la cabecera: ahi va el telefono del estudio, que antes se escondia y no se veia nunca. */ .cabecera{grid-template-columns:1fr auto;gap:10px} .marca-bloque{grid-area:1/1} .tel-estudio{grid-area:1/2;justify-self:end} } .marca{white-space:nowrap} @media(max-width:460px){.marca{font-size:19px}} /* 2. tope de ancho: en pantallas muy grandes el contenido deja de desparramarse y la doctora vuelve a quedar al lado del texto */ .hb-caja{position:relative;max-width:var(--ancho);margin:0 auto} .hb-caja .hb-figura{bottom:-58px} .banda-in{max-width:var(--ancho);margin:0 auto} .guardia.arriba .g-in{max-width:var(--ancho);margin:0 auto} .d-cred .credenciales{max-width:var(--ancho);margin-left:auto;margin-right:auto} /* 3. franja de guardia en pantallas chicas: se queda lo que importa, el titulo y el numero, y se va la frase larga */ @media(max-width:820px){ .g-linea .g-sep,.g-linea .g-dice{display:none} .guardia.arriba .g-in{flex-wrap:nowrap;gap:14px} } @media(max-width:430px){.g-linea h2{font-size:15px}.guardia.arriba .g-tel{font-size:18px;padding:6px 14px}} /* urgencias en la botonera: el punto que late es el mismo de la franja, asi el numero de guardia esta siempre a mano sin dejar la franja fija */ .pastilla .urgente{padding-left:14px} .pastilla .g-punto{position:static;left:auto;top:auto;width:7px;height:7px;flex:none} @media(max-width:620px){ .pastilla a{padding:10px 11px;font-size:12.5px;gap:6px} .pastilla .urgente{padding-left:10px} } @media(max-width:380px){.pastilla .urgente span.g-punto{display:none}} /* ================= sitio: elementos que pasaron a ser enlaces ================= */ .marca a{color:inherit;display:inline-block} .ab-grid h3 a{color:inherit} .ab-grid article:hover h3 a{color:var(--bronce)} .d-rail nav a.activa{background:rgba(255,255,255,.09);border-left-color:var(--bronce);color:var(--claro)} a.btn-fino{display:inline-flex;align-items:center;justify-content:center;line-height:1} a.ab-boton{cursor:pointer} /* ================= la guardia cruza todo el ancho ================= */ /* deja de estar adentro de la columna de contenido: es un aviso del sitio, no de la pagina, y la barra lateral arranca debajo de ella */ .guardia.arriba{margin-top:var(--alto-cab)} .d-shell{padding-top:0;min-height:calc(100vh - var(--alto-cab))} .guardia.arriba .g-in{max-width:none;margin:0} /* el titulo de guardia va centrado en la pagina y el telefono se queda a la derecha. Las dos columnas de los costados miden igual (1fr), asi que el centro es el centro real de la pantalla, no un centro aproximado. Solo de 1180px para arriba: debajo de ese ancho el telefono empuja su columna, la simetria se rompe y el centro dejaria de ser el centro. */ @media(min-width:1180px){ .guardia.arriba .g-in{display:grid;grid-template-columns:1fr auto 1fr; align-items:center;gap:22px} .guardia.arriba .g-linea{grid-column:2;justify-content:center;min-width:0} .guardia.arriba .g-tel{grid-column:3;justify-self:end} } /* ═══════════════ pagina de area ═══════════════ */ .area-tapa{background:var(--verde);color:var(--claro);padding:40px 44px 4px} .miga{font-size:13px;color:rgba(239,243,240,.5);margin:0 0 16px} .miga a:hover{color:var(--claro)} .area-tapa h1{font-size:clamp(31px,3.1vw,44px);line-height:1.14;letter-spacing:-.015em;margin:0 0 14px} .area-tapa .bajada{font-size:17.5px;line-height:1.7;color:rgba(239,243,240,.74);max-width:62ch;margin:0} .rotulo{font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.18em; text-transform:uppercase;color:rgba(239,243,240,.55);margin:0 0 10px} .momentos-nota{font-size:15px;line-height:1.7;color:rgba(239,243,240,.64);max-width:62ch;margin:0 0 30px} .momentos-nota.oscuro{color:var(--tinta-2);margin-bottom:24px} /* la causa penal es una linea de tiempo de verdad, asi que se dibuja como tal */ .momentos-band{background:var(--verde);color:var(--claro);padding:36px 44px 62px} .momentos{list-style:none;margin:0;padding:0;max-width:880px} .momento{position:relative;padding:0 0 32px 38px;border-left:1px solid rgba(255,255,255,.15)} .momento:last-child{border-left-color:transparent;padding-bottom:0} .momento::before{content:"";position:absolute;left:-5px;top:6px;width:9px;height:9px;border-radius:50%; background:rgba(239,243,240,.34)} .momento.urgente::before{background:#7FCB9B;box-shadow:0 0 0 0 rgba(127,203,155,.55); animation:latido 2.4s ease-out infinite} .m-cuando{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase; color:rgba(239,243,240,.48);margin-bottom:8px} .momento.urgente .m-cuando{color:#7FCB9B} .momento h3{font-size:24px;line-height:1.2;margin:0 0 9px} .momento h3 a:hover{color:var(--bronce)} .momento p{margin:0 0 14px;font-size:15px;line-height:1.7;color:rgba(239,243,240,.72);max-width:60ch} .m-links{display:flex;flex-wrap:wrap;gap:8px} .m-links a{font-size:13.5px;padding:6px 14px;border-radius:999px; border:1px solid rgba(255,255,255,.2);color:rgba(239,243,240,.84)} .m-links a:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.42);color:var(--claro)} @media(prefers-reduced-motion:reduce){.momento.urgente::before{animation:none}} /* segunda puerta: por delito, para el que ya sabe la caratula */ /* 12 delitos: con 4, 3 o 2 columnas la grilla siempre cierra entera. Con 5 quedaria una ultima fila de dos, coja. */ /* 14 delitos + la tarjeta de cierre, que ocupa dos celdas: 16 en total. Con 4 o con 2 columnas la grilla cierra entera. Por eso no hay tramo de 3. */ .delitos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:var(--ancho)} @media(min-width:1120px){.delitos{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:620px){.delitos{grid-template-columns:1fr}} .delito-cierre{grid-column:span 2;background:var(--papel-2) !important;border-style:dashed !important} .delito-cierre:hover{border-color:var(--bronce) !important;background:#fff !important} @media(max-width:620px){.delito-cierre{grid-column:span 1}} .delitos a{display:block;padding:18px 20px 19px;border:1px solid var(--linea);border-radius:10px; background:var(--papel);transition:border-color .16s,background .16s} .delitos a:hover{border-color:var(--bronce);background:#fff} .delitos b{display:block;font-family:var(--serif);font-weight:400;font-size:18px;margin-bottom:5px} .delitos span{display:block;font-size:13.5px;line-height:1.6;color:var(--tinta-2)} /* el fuero, que es donde la triple matricula se muestra sola */ .fuero-band{background:var(--verde-2);color:var(--claro);padding:54px 44px 58px} .fuero-txt{max-width:68ch} .fuero-txt h2{font-size:30px;line-height:1.2;margin:0 0 14px} .fuero-txt p{font-size:16px;line-height:1.75;color:rgba(239,243,240,.78);margin:0 0 15px} .fuero-nota{font-size:14.5px !important;color:rgba(239,243,240,.62) !important; border-left:2px solid var(--bronce);padding-left:16px} .fuero-band .ab-boton{margin-top:8px;color:var(--claro)} .fuero-band .ab-boton:hover{color:#fff} /* tres tarjetas de honorarios + la verde ancha abajo, sin celdas vacias */ @media(min-width:1200px){.ab-grid.honorarios{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:900px){ .area-tapa,.momentos-band,.fuero-band{padding-left:24px;padding-right:24px} .momento{padding-left:28px} .momento h3{font-size:21px} } /* ═══════════════ barra lateral desplegable ═══════════════ */ .rama-fila{display:flex;align-items:stretch} .rama-fila > a{flex:1;min-width:0} .rama-btn{flex:none;background:none;border:0;cursor:pointer;line-height:0; color:rgba(239,243,240,.4);padding:0 20px 0 4px} .rama-btn:hover{color:var(--claro)} .rama-btn svg{transition:transform .2s} .rama.abierta .rama-btn svg{transform:rotate(90deg)} /* los hijos son un