/* Dr. Nicolás Nervo · web v2: dos líneas con identidad propia, pestañas, tarjetas y microinteracciones. */
:root { --int-fondo: #F6EFEC; --int-oscuro: #3A1F33; --int-acento: #9A5560; --int-champan: #C9A77C; --uro-fondo: #EDF2F3; --uro-oscuro: #0B2233; --uro-acento: #1D5F8A; --uro-luz: #5BB8E8; interpolate-size: allow-keywords; }
html { scroll-behavior: smooth; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* cabecera: el color cambia con la línea */
header.nav { transition: background .4s, box-shadow .35s; }
header.nav.plegada { box-shadow: 0 10px 30px rgba(0,0,0,.18); }
header.nav .wrap { transition: padding .35s; }
header.nav.plegada .wrap { padding-block: 9px; }
.pag-intima header.nav { background: rgba(58,31,51,.94); }
.pag-intima header.nav .brand svg { color: var(--int-champan); }
.cta.champan { background: var(--int-champan); color: var(--int-oscuro); }
.cta { transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .35s, filter .25s; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.2); filter: brightness(1.05); }
.cta:active { transform: scale(.97); }
nav.links { align-items: center; }
nav.links a { position: relative; display: inline-flex; align-items: center; gap: 8px; }
nav.links a i { width: 8px; height: 8px; border-radius: 50%; display: none; }
nav.links a.l-uro i { display: block; background: var(--uro-luz); box-shadow: 0 0 0 3px rgba(91,184,232,.2); }
nav.links a.l-int i { display: block; background: var(--int-champan); box-shadow: 0 0 0 3px rgba(201,167,124,.22); }
nav.links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
nav.links a:hover::after, nav.links a[aria-current]::after { transform: scaleX(1); }
nav.links a[aria-current] { opacity: 1; font-weight: 600; }
.menu-btn { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 10px; background: none; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; cursor: pointer; }
.menu-btn span { height: 1.5px; background: #fff; transition: transform .35s, opacity .2s; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.menu-movil { border-top: 1px solid rgba(255,255,255,.12); animation: bajar .35s cubic-bezier(.2,.8,.2,1); }
.menu-movil .wrap { display: grid; gap: 6px; padding-block: 16px 22px; }
.menu-movil a { color: #fff; text-decoration: none; padding: 10px 4px; font-size: 16px; }
.menu-movil a.mm-uro, .menu-movil a.mm-int { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; }
.menu-movil a.mm-uro { background: rgba(91,184,232,.12); } .menu-movil a.mm-uro svg { color: var(--uro-luz); font-size: 34px; }
.menu-movil a.mm-int { background: rgba(201,167,124,.16); } .menu-movil a.mm-int svg { color: var(--int-champan); font-size: 34px; }
.menu-movil b { display: block; font: 500 16px/1.2 var(--sans); }
.menu-movil small { display: block; font-size: 12px; opacity: .7; margin-top: 2px; }
@keyframes bajar { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 860px) { nav.links { display: none; } .menu-btn { display: inline-flex; } header.nav .cta { padding: 10px 14px; font-size: 13px; } }
@media (min-width: 861px) { .menu-movil { display: none !important; } }

/* inicio: dos puertas grandes, cada una con su identidad */
.elige { padding: 0; }
.puertas { display: flex; min-height: 560px; }
.puerta { flex: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; justify-content: flex-end; padding: 56px clamp(20px, 4vw, 64px); text-decoration: none; transition: flex-grow .7s cubic-bezier(.2,.8,.2,1); isolation: isolate; }
.puerta::before { content: ""; position: absolute; inset: 0; z-index: -1; transition: transform 1.2s cubic-bezier(.2,.8,.2,1), opacity .6s; }
.puerta .mark { font-size: 64px; transition: transform .7s cubic-bezier(.34,1.56,.64,1); }
.puerta h3 { font: 400 clamp(30px, 3.6vw, 46px)/1.08 var(--serif); max-width: 14em; margin: 0; }
.puerta p { margin: 0; max-width: 30em; opacity: .85; }
.puerta ul { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.puerta li { font: 500 12px/1 var(--mono); letter-spacing: .06em; padding: 8px 12px; border-radius: 999px; transition: transform .45s cubic-bezier(.34,1.56,.64,1), background .3s; }
.puerta .go { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1 var(--sans); margin-top: 12px; }
.puerta .go svg { width: 18px; height: 18px; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.p-uro { color: #fff; background: var(--uro-oscuro); }
.p-uro::before { background: radial-gradient(60% 60% at 80% 10%, rgba(91,184,232,.28), transparent 70%), repeating-linear-gradient(90deg, rgba(91,184,232,.07) 0 1px, transparent 1px 46px), repeating-linear-gradient(0deg, rgba(91,184,232,.07) 0 1px, transparent 1px 46px); }
.p-uro .mark, .p-uro .eyebrow, .p-uro .go { color: var(--uro-luz); }
.p-uro li { background: rgba(91,184,232,.12); color: #CEEAF8; }
.p-int { color: var(--int-oscuro); background: var(--int-fondo); }
.p-int::before { background: radial-gradient(55% 55% at 20% 15%, rgba(201,167,124,.45), transparent 70%), radial-gradient(45% 50% at 90% 85%, rgba(183,114,122,.35), transparent 70%); }
.p-int .mark, .p-int .eyebrow, .p-int .go { color: var(--int-acento); }
.p-int h3 { font-style: italic; font-weight: 300; }
.p-int li { background: rgba(154,85,96,.1); color: var(--int-oscuro); }
@media (hover: hover) and (min-width: 861px) {
  .puertas:hover .puerta { flex-grow: .8; }
  .puertas .puerta:hover { flex-grow: 1.35; }
  .puerta:hover::before { transform: scale(1.08); }
  .puerta:hover .mark { transform: rotate(-10deg) scale(1.1); }
  .puerta:hover li { transform: translateY(-3px); }
  .puerta:hover li:nth-child(2) { transition-delay: .04s; } .puerta:hover li:nth-child(3) { transition-delay: .08s; } .puerta:hover li:nth-child(4) { transition-delay: .12s; } .puerta:hover li:nth-child(5) { transition-delay: .16s; }
  .puerta:hover .go svg { transform: translateX(8px); }
}
@media (max-width: 860px) { .puertas { flex-direction: column; min-height: 0; } .puerta { padding-block: 44px; } }

/* cabecera de cada línea */
.linea-hero { padding: 88px 0 72px; position: relative; overflow: hidden; }
.linea-hero .eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.linea-hero .eyebrow .mark { font-size: 26px; }
.linea-hero h1 { font-size: clamp(40px, 6vw, 78px); line-height: 1.03; font-weight: 300; max-width: 13em; animation: subir .9s cubic-bezier(.2,.8,.2,1) both; }
.linea-hero .lead { max-width: 40em; font-size: 18px; margin: 22px 0 36px; animation: subir .9s .15s cubic-bezier(.2,.8,.2,1) both; }
@keyframes subir { from { opacity: 0; transform: translateY(18px); } }
.lh-uro { background: var(--uro-oscuro); color: #fff; }
.lh-uro::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 70% at 85% 0%, rgba(91,184,232,.25), transparent 70%), repeating-linear-gradient(90deg, rgba(91,184,232,.06) 0 1px, transparent 1px 56px), repeating-linear-gradient(0deg, rgba(91,184,232,.06) 0 1px, transparent 1px 56px); pointer-events: none; }
.lh-uro .wrap { position: relative; }
.lh-uro .eyebrow { color: var(--uro-luz); }
.lh-uro h1 b { font-weight: 400; color: var(--uro-luz); }
.lh-uro .lead { color: #C9D4DC; }
.cifras { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.cifras a { display: block; height: 100%; text-decoration: none; padding: 18px; border: 1px solid rgba(91,184,232,.25); border-radius: 14px; background: rgba(255,255,255,.03); transition: transform .45s cubic-bezier(.34,1.56,.64,1), background .3s, border-color .3s; animation: subir .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.3s + var(--n) * .08s); }
.cifras a:hover { transform: translateY(-4px); background: rgba(91,184,232,.1); border-color: var(--uro-luz); }
.cifras b { display: block; font: 300 44px/1 var(--serif); color: var(--uro-luz); }
.cifras span { display: block; font-size: 17px; font-weight: 500; line-height: 1.3; color: #DCE6EB; }
/* Texto justo debajo del título de la sección (no alineado abajo a la derecha). */
.sec-head:has(.sec-sub) { grid-template-columns: 1fr; }
.sec-head .sec-sub { margin-top: 16px; font-size: 18px; }
@media (max-width: 900px) { .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lh-int { background: var(--int-oscuro); color: var(--int-fondo); }
.lh-int::before { content: ""; position: absolute; width: 620px; height: 620px; right: -160px; top: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(201,167,124,.4), transparent 65%); animation: flotar 12s ease-in-out infinite; pointer-events: none; }
.lh-int::after { content: ""; position: absolute; width: 520px; height: 520px; left: -200px; bottom: -300px; border-radius: 50%; background: radial-gradient(circle, rgba(183,114,122,.45), transparent 65%); animation: flotar 14s ease-in-out infinite reverse; pointer-events: none; }
@keyframes flotar { 50% { transform: translate(-30px, 24px) scale(1.06); } }
.lh-int .wrap { position: relative; z-index: 1; }
.lh-int .eyebrow { color: var(--int-champan); }
.lh-int h1 em { font-style: italic; color: #E7B8BE; }
.lh-int .lead { color: #E3CFD6; }
.duo-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 760px; }
.duo-hero a { display: grid; gap: 6px; text-decoration: none; padding: 22px 24px; border-radius: 22px 22px 22px 6px; background: rgba(246,239,236,.08); border: 1px solid rgba(201,167,124,.35); transition: transform .45s cubic-bezier(.34,1.56,.64,1), background .3s; animation: subir .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.3s + var(--n) * .1s); }
.duo-hero a:hover { transform: translateY(-4px); background: rgba(246,239,236,.14); }
.duo-hero b { font: 300 italic 30px/1.1 var(--serif); color: var(--int-champan); }
.duo-hero span { font-size: 14px; color: #E3CFD6; }
@media (max-width: 600px) { .duo-hero { grid-template-columns: 1fr; } }

/* secciones de cada línea */
.pag-uro .salud-sec { background: var(--uro-fondo); }
.pag-intima main { background: var(--int-fondo); }
.pag-intima .contact { background: #EFE3DF; }
.pag-intima .contact h2, .pag-intima .contact .eyebrow { color: var(--int-oscuro) !important; }
.pag-intima .contact .cta.teal { background: var(--int-oscuro); color: var(--int-fondo); }
.pag-intima #bot-open { background: var(--int-oscuro); color: var(--int-fondo); }
.robot-sec { background: #fff; padding-block: 72px; }
.robot-sec > .wrap > .eyebrow { color: var(--uro-acento); margin: 0 0 18px; }
.robot-sec .robot { margin-bottom: 0; }
.robot .big img, .robot .side img { transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.robot .big:hover img, .robot .side:hover img { transform: scale(1.04); }
.robot .big .over .eyebrow { color: #CEEAF8 !important; text-shadow: 0 1px 2px rgba(11,34,51,.95), 0 0 14px rgba(11,34,51,.8); } /* Rótulo sobre la foto del quirófano: el azul #5BB8E8 no se leía sobre las fundas claras (04/10/2026). */
.robot .side { overflow: hidden; border-radius: 14px; }

/* pestañas de áreas */
.tabs { position: relative; display: flex; gap: 4px; padding: 5px; border-radius: 16px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { position: relative; z-index: 1; flex: 1 0 auto; display: grid; gap: 2px; text-align: left; background: none; border: 0; border-radius: 12px; padding: 14px 18px; cursor: pointer; font: inherit; color: inherit; transition: color .3s; }
.tabs button b { font: 600 15px/1.2 var(--sans); white-space: nowrap; }
.tabs button small { font: 400 11px/1.2 var(--mono); letter-spacing: .06em; opacity: .7; white-space: nowrap; }
.tabs-marca { position: absolute; left: 0; top: 5px; bottom: 5px; width: 0; border-radius: 12px; transition: transform .55s cubic-bezier(.34,1.3,.64,1), width .55s cubic-bezier(.34,1.3,.64,1); }
.pag-uro .tabs { background: #fff; border: 1px solid #D5E0E3; color: #46555F; }
.pag-uro .tabs button[aria-selected="true"] { color: #fff; }
.pag-uro .tabs-marca { background: var(--uro-oscuro); box-shadow: inset 0 -3px 0 var(--uro-luz); }
.pag-intima .tabs { background: #fff; border: 1px solid #EAD9DB; color: #6B4E5E; max-width: 520px; }
.pag-intima .tabs button[aria-selected="true"] { color: var(--int-fondo); }
.pag-intima .tabs-marca { background: var(--int-oscuro); box-shadow: inset 0 -3px 0 var(--int-champan); }
.tab-panel { padding-top: 26px; }
.tab-panel.cambia { animation: subir .5s cubic-bezier(.2,.8,.2,1); }
.tab-desc { margin: 0 0 22px; font: 300 22px/1.35 var(--serif); }
.pag-intima .tab-desc { font-style: italic; color: var(--int-oscuro); }
.pag-uro .tab-desc { color: var(--uro-oscuro); }

/* tarjetas de procedimiento */
.pcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tab-panel.cambia .pcards li { animation: subir .5s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--n) * 45ms); }
.pcard { all: unset; box-sizing: border-box; position: relative; display: grid; gap: 10px; align-content: start; height: 100%; width: 100%; padding: 24px 24px 22px; border-radius: 16px; cursor: pointer; overflow: hidden; transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .45s, border-color .3s, background .3s; }
.pcard::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.pcard .pnum { font: 500 12px/1 var(--mono); letter-spacing: .1em; }
.pcard h3 { font-size: 22px; line-height: 1.2; }
.pcard p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.pcard .pver { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font: 600 13px/1 var(--sans); }
.pcard .pver svg { width: 16px; height: 16px; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.pcard:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.pag-uro .pcard { background: #fff; border: 1px solid #D5E0E3; color: var(--uro-oscuro); }
.pag-uro .pcard .pnum, .pag-uro .pcard .pver { color: var(--uro-acento); }
.pag-uro .pcard p { color: #46555F; }
.pag-uro .pcard::before { background: linear-gradient(90deg, var(--uro-acento), var(--uro-luz)); }
.pag-intima .pcard { background: #fff; border: 1px solid #EAD9DB; border-radius: 22px 22px 22px 6px; color: var(--int-oscuro); }
.pag-intima .pcard h3 { font-style: italic; font-weight: 300; font-size: 24px; }
.pag-intima .pcard .pnum, .pag-intima .pcard .pver { color: var(--int-acento); }
.pag-intima .pcard p { color: #6B4E5E; }
.pag-intima .pcard::before { background: linear-gradient(90deg, var(--int-acento), var(--int-champan)); }
@media (hover: hover) {
  .pcard:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(11,34,51,.12); }
  .pag-uro .pcard:hover { border-color: var(--uro-acento); }
  .pag-intima .pcard:hover { border-color: var(--int-acento); box-shadow: 0 20px 44px rgba(58,31,51,.14); }
  .pcard:hover::before { transform: scaleX(1); }
  .pcard:hover .pver svg { transform: translateX(6px); }
}
@media (max-width: 900px) { .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .pcards { grid-template-columns: 1fr; } }

/* ficha: sin ilustración todavía → una columna */
#proc-dlg.sin-visual .in { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; }
#proc-dlg.sin-visual .in > div:first-child { display: none; }
#proc-dlg[open] { animation: abrirFicha .45s cubic-bezier(.34,1.3,.64,1); }
@keyframes abrirFicha { from { opacity: 0; transform: translateY(20px) scale(.97); } }
.cmp img { display: block; width: 100%; height: auto; }
.cmp .despues img { height: 100%; object-fit: cover; }

/* entradas al hacer scroll (solo con JS) */
.anima .entra { opacity: 0; translate: 0 26px; transition: opacity .8s cubic-bezier(.2,.8,.2,1), translate .8s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--n, 0) * 80ms); }
.anima .entra.visto { opacity: 1; translate: none; }
.tl li { transition: opacity .7s, translate .7s; }
.gallery img, .places .place { transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .8s, translate .8s; }
.gallery img:hover { transform: scale(1.03) rotate(-.5deg); }
#bot-open { transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .35s; animation: asomar .8s cubic-bezier(.34,1.56,.64,1) 1s both; }
#bot-open:hover { transform: translateY(-3px) scale(1.03); }
@keyframes asomar { from { opacity: 0; transform: translateY(30px) scale(.85); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anima .entra { opacity: 1; translate: none; }
  .linea-hero *, .cifras a, .duo-hero a, .lh-int::before, .lh-int::after, .tab-panel, .pcards li, #bot-open, #proc-dlg { animation: none !important; }
}

/* ===== v2.1 · botones grandes de marca, logos con color, miniaturas y foto nueva ===== */
.hero figure img { object-position: 50% 16%; filter: none; }
.marcas-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 640px; }
.marca-btn { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) 22px; gap: 14px; align-items: center; padding: 16px 18px 16px 16px; border-radius: 18px; text-decoration: none; overflow: hidden; transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .4s, background .3s; }
.marca-btn .mb-logo { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; transition: transform .6s cubic-bezier(.34,1.56,.64,1); }
.marca-btn .mb-logo .mark { font-size: 40px; }
.marca-btn small { display: block; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .8; margin-bottom: 5px; }
.marca-btn b { display: block; font: 500 18px/1.15 var(--serif); }
.marca-btn .mb-txt > span { display: block; font-size: 12.5px; line-height: 1.35; margin-top: 4px; opacity: .85; }
.marca-btn .fl { width: 22px; height: 22px; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.mb-uro { background: linear-gradient(135deg, #123A4F, #0E2B3D); color: #fff; box-shadow: inset 0 0 0 1px rgba(91,184,232,.45); }
.mb-uro .mb-logo { background: var(--uro-luz); color: var(--uro-oscuro); box-shadow: 0 0 0 6px rgba(91,184,232,.16); }
.mb-uro small, .mb-uro .fl { color: var(--uro-luz); }
.mb-int { background: linear-gradient(135deg, #F6EFEC, #EBD9D6); color: var(--int-oscuro); box-shadow: inset 0 0 0 1px rgba(201,167,124,.6); }
.mb-int .mb-logo { background: var(--int-oscuro); color: var(--int-champan); box-shadow: 0 0 0 6px rgba(201,167,124,.28); }
.mb-int b { font-style: italic; }
.mb-int small, .mb-int .fl { color: var(--int-acento); }
.marca-btn:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.marca-btn:hover .mb-logo { transform: rotate(-10deg) scale(1.08); }
.marca-btn:hover .fl { transform: translateX(5px); }
.marca-btn:active { transform: scale(.98); }
@media (max-width: 560px) { .marcas-hero { grid-template-columns: 1fr; } }

/* cabecera: logos de marca con su color */
nav.links a .l-logo { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
nav.links a .l-logo .mark { font-size: 19px; }
nav.links a.l-uro .l-logo { background: var(--uro-luz); color: var(--uro-oscuro); }
nav.links a.l-int .l-logo { background: var(--int-champan); color: var(--int-oscuro); }
nav.links a.l-uro, nav.links a.l-int { padding: 5px 12px 5px 5px; border-radius: 12px; opacity: 1; font-weight: 500; }
nav.links a.l-uro { background: rgba(91,184,232,.12); }
nav.links a.l-int { background: rgba(201,167,124,.16); }
nav.links a.l-uro::after, nav.links a.l-int::after { display: none; }
nav.links a.l-uro:hover .l-logo, nav.links a.l-int:hover .l-logo { transform: rotate(-10deg) scale(1.08); }
nav.links a.l-uro[aria-current] { box-shadow: inset 0 0 0 1.5px var(--uro-luz); }
nav.links a.l-int[aria-current] { box-shadow: inset 0 0 0 1.5px var(--int-champan); }

/* insignia grande en la cabecera de cada línea */
.insignia-linea { display: inline-flex; align-items: center; gap: 16px; margin-bottom: 26px; animation: subir .8s cubic-bezier(.2,.8,.2,1) both; }
.insignia-linea .il-logo { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 24px; }
.insignia-linea .il-logo .mark { font-size: 56px; }
.insignia-linea small { display: block; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; opacity: .8; margin-bottom: 6px; }
.insignia-linea b { display: block; font: 400 26px/1.1 var(--serif); }
.lh-uro .insignia-linea .il-logo { background: var(--uro-luz); color: var(--uro-oscuro); box-shadow: 0 0 0 10px rgba(91,184,232,.14), 0 0 60px rgba(91,184,232,.35); }
.lh-uro .insignia-linea small { color: var(--uro-luz); }
.lh-int .insignia-linea .il-logo { background: var(--int-champan); color: var(--int-oscuro); box-shadow: 0 0 0 10px rgba(201,167,124,.18), 0 0 60px rgba(201,167,124,.35); }
.lh-int .insignia-linea small { color: var(--int-champan); }
.lh-int .insignia-linea b { font-style: italic; }

/* puertas del inicio: logo más grande y con fondo de color */
.puerta .mark { font-size: 44px; width: 84px; height: 84px; padding: 20px; border-radius: 22px; box-sizing: border-box; }
.p-uro .mark { background: var(--uro-luz); color: var(--uro-oscuro); box-shadow: 0 0 0 10px rgba(91,184,232,.14); }
.p-int .mark { background: var(--int-oscuro); color: var(--int-champan); box-shadow: 0 0 0 10px rgba(201,167,124,.25); }

/* tarjetas con miniatura del procedimiento */
.pcard { padding-top: 0; }
.pcard .pfoto { display: block; margin: 0 -24px 6px; aspect-ratio: 640 / 472; overflow: hidden; }
.pcard .pfoto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.pcard:hover .pfoto img { transform: scale(1.06); }
.pcard:not(:has(.pfoto)) { padding-top: 24px; }
.pag-intima .pcard .pfoto { border-radius: 22px 22px 0 0; }
.cta { white-space: nowrap; }
.pcard .pfoto { position: relative; }
.pcard .pfoto i { position: absolute; left: 12px; bottom: 10px; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; background: rgba(11,34,51,.82); color: var(--uro-luz); padding: 6px 9px; border-radius: 999px; }
.pag-intima .pcard .pfoto i { background: rgba(58,31,51,.85); color: var(--int-champan); }
.creditos { margin: 28px 0 0; font: 400 11px/1.5 var(--mono); color: #6A7780; max-width: 90ch; }

/* Portada: identidad primero (logo + Dr. Nicolás Nervo + Urólogo) y el lema debajo. */
.hero-id { display: flex; align-items: center; gap: 22px; margin: 0 0 26px; }
.hero-id .mark { width: clamp(64px, 8vw, 96px); height: clamp(64px, 8vw, 96px); color: var(--consola); flex: none; }
.hero .hero-id h1 { margin: 0; font-size: clamp(38px, 5.6vw, 72px); line-height: 1.02; font-weight: 400; }
.hero .hero-id h1 span { display: block; margin-top: 8px; font-size: .62em; font-weight: 300; color: var(--consola); letter-spacing: .01em; }
.hero-lema { margin: 0 0 6px; font-family: var(--serif, inherit); font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2; font-weight: 300; color: var(--blanco); }
.hero-lema b { font-weight: 400; color: var(--consola); }
.hero-lema em { font-style: italic; color: var(--arcilla-l); }
.hero-formado { margin: 0; font: 500 12px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acero); }
@media (max-width: 860px) {
  .hero .who { text-align: center; }
  .hero-id { flex-direction: column; gap: 14px; }
  .hero .who p.lead { margin-inline: auto; }
  .marcas-hero { justify-items: stretch; }
}
@media (max-width: 860px) { .marcas-hero a { text-align: left; } }
/* Móvil: la cabecera cabe en una fila; «Pedir cita» ya está en el botón flotante de Nerva y en el menú. */
@media (max-width: 480px) { .nav .wrap > .cta { display: none; } .nav .brand small { white-space: nowrap; font-size: 10px; } }

/* v2.3 · logo N más grande: el símbolo ya trae margen propio, así que se reduce el hueco alrededor */
.marca-btn .mb-logo .mark { font-size: 58px; }
.puerta .mark { font-size: 64px; padding: 10px; }
.insignia-linea .il-logo .mark { font-size: 80px; }
nav.links a .l-logo .mark { font-size: 28px; }
.brand svg { font-size: 40px; }
footer .brand svg { font-size: 34px; }
.promise svg { font-size: 96px; }
.menu-movil a.mm-uro svg, .menu-movil a.mm-int svg { font-size: 44px; }
#bot-open svg { font-size: 26px; }
/* Logo de la portada: la N ocupa ~56 % de su caja, así que se agranda y se compensa el margen interno */
.hero-id { gap: 8px; }
.hero-id .mark { width: clamp(110px, 13vw, 190px); height: clamp(110px, 13vw, 190px); margin: -12px 0 -12px -26px; }
@media (max-width: 860px) { .hero-id .mark { width: 120px; height: 120px; margin: -14px 0 -18px -18px; } }

/* v2.4 · el logo N se dibuja como un trazo desde cero y aparece el punto */
.n-anim path { stroke-dasharray: 100; animation: trazoN 1.3s cubic-bezier(.65,0,.35,1) .25s both; }
.n-anim path + path { animation-duration: .6s; animation-delay: 1.35s; }
.n-anim circle { transform-box: fill-box; transform-origin: center; animation: puntoN .6s cubic-bezier(.34,1.56,.64,1) 1.85s both; }
@keyframes trazoN { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes puntoN { from { transform: scale(0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .n-anim path, .n-anim circle { animation: none; } }

/* Aviso de Telar (mismo diseño que en la web de Luisa, 50 % más grande) con Instagram y Telegram */
footer .wrap { flex-wrap: wrap; }
.credito-telar { flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 8px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); }
.credito-telar a { color: inherit; text-decoration: none; transition: opacity .3s, transform .45s cubic-bezier(.34,1.56,.64,1), color .3s; }
.ct-marca { display: flex; align-items: center; gap: 14px; opacity: .8; font: 500 18px/1 var(--sans); letter-spacing: .05em; }
.ct-marca img { width: 30px; height: 30px; border-radius: 4px; background: #F4EDE1; padding: 3px; transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.ct-marca b { font-weight: 700; }
.ct-marca:hover { opacity: 1; }
.ct-marca:hover img { transform: rotate(90deg); }
.ct-red { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); opacity: .8; }
.ct-red svg { width: 20px; height: 20px; }
.ct-red:hover { opacity: 1; transform: translateY(-3px); color: #fff; border-color: rgba(255,255,255,.5); }
@media (max-width: 560px) { .credito-telar { flex-wrap: wrap; gap: 12px; } .ct-marca { flex-basis: 100%; justify-content: center; font-size: 16px; } }

/* v2.5 · el logo N se vuelve a dibujar al pasar el ratón (en la portada, las insignias, los botones de marca, las puertas, el menú y el pie) */
@keyframes trazoN2 { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes puntoN2 { from { transform: scale(0); opacity: 0; } }
.hero-id:hover .n-anim path, .insignia-linea:hover .n-anim path { animation: trazoN2 .9s cubic-bezier(.65,0,.35,1) both; }
.hero-id:hover .n-anim path + path, .insignia-linea:hover .n-anim path + path { animation-duration: .45s; animation-delay: .75s; }
.hero-id:hover .n-anim circle, .insignia-linea:hover .n-anim circle { animation: puntoN2 .5s cubic-bezier(.34,1.56,.64,1) 1.1s both; }
/* Logos con <use>: el trazo se hereda dentro del símbolo, así que se anima el propio svg */
.brand:hover svg.mark, .marca-btn:hover .mb-logo .mark, .puerta:hover > .mark, nav.links a:hover .l-logo .mark, .menu-movil a:hover svg.mark, #bot-open:hover svg.mark, .promise:hover svg.mark {
  stroke-dasharray: 100; animation: trazoN2 .9s cubic-bezier(.65,0,.35,1) both;
}
.hero-id, .insignia-linea, .brand { cursor: default; }
a.brand { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .hero-id:hover .n-anim path, .hero-id:hover .n-anim circle, .insignia-linea:hover .n-anim path, .insignia-linea:hover .n-anim circle,
  .brand:hover svg.mark, .marca-btn:hover .mb-logo .mark, .puerta:hover > .mark, nav.links a:hover .l-logo .mark, .menu-movil a:hover svg.mark, #bot-open:hover svg.mark, .promise:hover svg.mark { animation: none; }
}

/* v2.6 · tarjetas: comparador antes/después al pasar el ratón y descripción corta que aparece al pasar el ratón */
.pcard .pfoto { position: relative; }
.pcard .pfoto i { display: none; }
.comp { --x: 50%; cursor: ew-resize; touch-action: pan-y; }
.comp img { display: block; }
.comp .c-desp { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.comp .c-desp img { width: 100%; height: 100%; object-fit: cover; }
.comp .c-linea { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08); pointer-events: none; }
.comp .c-linea b { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.comp .c-linea b::before, .comp .c-linea b::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -5px; border: 5px solid transparent; }
.comp .c-linea b::before { left: 5px; border-right-color: #1B2127; }
.comp .c-linea b::after { right: 5px; border-left-color: #1B2127; }
.comp .c-et { position: absolute; top: 10px; font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; background: rgba(255,255,255,.92); pointer-events: none; transition: opacity .3s; }
.comp .c-et.a { right: 10px; color: #8E4550; }
.comp .c-et.d { left: 10px; color: var(--uro-acento); }
.pag-intima .comp .c-et.d { color: var(--int-acento); }
.pag-uro .comp .c-linea b::before { border-right-color: var(--uro-acento); } .pag-uro .comp .c-linea b::after { border-left-color: var(--uro-acento); }
.pag-intima .comp .c-linea b::before { border-right-color: var(--int-acento); } .pag-intima .comp .c-linea b::after { border-left-color: var(--int-acento); }
/* Descripción corta: oculta hasta pasar el ratón (siempre visible en pantallas táctiles) */
.pcard .pdesc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.8,.2,1), opacity .35s; opacity: 0; }
.pcard .pdesc > span { min-height: 0; overflow: hidden; font-size: 14.5px; line-height: 1.5; }
.pcard:hover .pdesc, .pcard:focus-visible .pdesc { grid-template-rows: 1fr; opacity: 1; }
.pag-uro .pcard .pdesc { color: #46555F; }
.pag-intima .pcard .pdesc { color: #6B4E5E; }
@media (hover: none) { .pcard .pdesc { grid-template-rows: 1fr; opacity: 1; } }
#proc-peek { display: none !important; }

/* Portada: la foto de Nico sin marco, a sangre a la derecha y desvanecida hacia el texto (28/09/2026, como la web de Luisa). */
.hero { position: relative; isolation: isolate; }
.hero .wrap { position: static; }
.hero .who { position: relative; z-index: 2; }
.hero figure { position: absolute; top: 0; right: 0; bottom: 0; width: min(50%, 760px); min-height: 0; z-index: 1; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 80%, transparent 100%); mask-composite: intersect; }
.hero figure img { border-radius: 0; object-position: 50% 6%; }
@media (max-width: 860px) {
  .hero figure { position: relative; width: auto; height: 460px; margin: 8px -20px 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); }
}

/* v3 · Portada en móvil, opción A «la foto manda» (29/09/2026): foto a sangre con el nombre encima, puertas con foto,
   formación en fila deslizable, trayectoria plegada y botón de Nerva redondo para no tapar contenido. */
.hero-cita, .p-foto, .p-corto { display: none; }
.tl-mas > summary { display: none; }
@media (max-width: 760px) {
  .hero { min-height: min(640px, 88svh); display: flex; }
  .hero .wrap { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; padding: 0 20px 28px; }
  .hero figure { position: absolute; inset: 0; width: auto; height: auto; margin: 0; -webkit-mask-image: none; mask-image: none; }
  .hero figure img { object-position: 50% 10%; }
  .hero figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,34,51,0) 30%, rgba(11,34,51,.82) 64%, var(--tinta) 100%); }
  .hero .who { text-align: left; padding: 0; }
  .hero-id { flex-direction: row; margin: 0 0 14px; }
  .hero-id .mark, .hero-formado, .hero .who p.lead, .marcas-hero { display: none; }
  .hero .hero-id h1 { font-size: 44px; }
  .hero .hero-id h1 span { font-style: italic; font-size: 36px; } /* +40 % (29/09/2026) */
  .hero-lema { font-size: 30px; line-height: 1.22; margin: 0 0 22px; text-shadow: 0 1px 12px rgba(11,34,51,.6); } /* mismo formato que en escritorio, ~30 % más grande que antes en móvil */
  .hero-cita { display: flex; justify-content: center; min-height: 52px; align-items: center; font-size: 17px; }

  .puertas { gap: 14px; padding: 22px 16px 8px; background: var(--uro-oscuro); }
  .puerta { min-height: 210px; padding: 18px; gap: 4px; border-radius: 22px; }
  .puerta ul, .puerta > p:not(.p-corto), .puerta .go { display: none; }
  .puerta h3 { font-size: 30px; }
  .p-corto { display: block; font-size: 16px; opacity: .9; }
  .p-uro .p-foto { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
  .p-uro::before { z-index: 0; background: linear-gradient(0deg, rgba(11,34,51,.95) 25%, rgba(11,34,51,.15) 75%); }
  .p-uro > *:not(.p-foto) { position: relative; z-index: 1; }
  .p-uro > .mark { display: none; }
  .p-int { color: #fff; background: radial-gradient(120% 90% at 80% 10%, var(--int-acento) 0%, var(--int-oscuro) 70%); }
  .p-int::before { display: none; }
  .p-int .eyebrow { color: var(--int-champan); }
  .p-int > .mark { position: absolute; right: 12px; top: 12px; width: 96px; height: 96px; padding: 6px; background: none; box-shadow: none; color: var(--int-champan); }
  .tray, .sedes, .contact { padding-block: 56px; }
  .sedes h2 { font-size: 34px; line-height: 1.1; margin-bottom: 24px; }

  .creds { background: var(--uro-oscuro); border: 0; }
  .creds .wrap { padding: 0; }
  .creds ul { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; gap: 10px; padding: 22px 16px 30px; font: 400 14px/1.35 var(--sans); color: #AFC2CC; }
  .creds li { flex: 0 0 auto; scroll-snap-align: start; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(91,184,232,.25); }
  .creds li strong { display: block; color: #fff; font: 500 17px/1.2 var(--sans); }
  .creds .sep { display: none; }

  .tray h2 { font-size: 34px; margin-bottom: 18px; }
  .tl { display: flex; flex-direction: column; gap: 18px; }
  .gallery { order: -1; grid-template-columns: 1.3fr 1fr; }
  .gallery img, .gallery img.wide { grid-column: auto; aspect-ratio: auto; height: 200px; }
  .gallery img:nth-child(3) { display: none; }
  .tl-mas > summary { display: flex; justify-content: center; align-items: center; min-height: 52px; border: 1.5px solid var(--consola); border-radius: 999px; color: var(--consola); font: 600 17px/1 var(--sans); cursor: pointer; list-style: none; }
  .tl-mas > summary::-webkit-details-marker { display: none; }
  .tl-mas[open] > summary { margin-bottom: 22px; }
  .tl li b { font-size: 17px; } .tl li span { font-size: 15px; }

}

/* v3.1 · Móvil (29/09/2026): el menú de áreas muestra todas las opciones en rejilla (sin scroll lateral oculto)
   y la fila de formación avisa de que se desliza. */
.desliza { display: none; }
@media (max-width: 760px) {
  .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; overflow: visible; }
  .tabs button { justify-content: center; text-align: center; min-height: 52px; padding: 12px 10px; }
  .tabs button b { white-space: normal; font-size: 16px; }
  .tabs button:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
  .tabs-marca { display: none; }
  .pag-uro .tabs button { background: #EEF4F5; }
  .pag-intima .tabs button { background: #F8EEEC; }
  .pag-uro .tabs button[aria-selected="true"] { background: var(--uro-oscuro); box-shadow: inset 0 -3px 0 var(--uro-luz); }
  .pag-intima .tabs button[aria-selected="true"] { background: var(--int-oscuro); box-shadow: inset 0 -3px 0 var(--int-champan); }
  .desliza { display: block; margin: 0; padding: 18px 16px 0; font: 500 15px/1.3 var(--sans); color: var(--uro-luz); }
  .creds ul { padding-top: 12px; -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); }
}

/* v3.2 · Menú desplegable en móvil (29/09/2026): lista vertical limpia. La regla del encabezado (header.nav .wrap en fila)
   pisaba la del menú y ponía todo en una fila cortada («Trayec…»). */
header.nav .menu-movil .wrap { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px 22px; }
.menu-movil a.mm-uro, .menu-movil a.mm-int { grid-template-columns: 52px 1fr; gap: 14px; padding: 14px 16px; border-radius: 16px; }
.menu-movil a.mm-uro svg, .menu-movil a.mm-int svg { font-size: 48px; width: 48px; height: 48px; }
.menu-movil b { font: 500 19px/1.2 var(--sans); }
.menu-movil small { font-size: 15px; opacity: .8; margin-top: 3px; }
.menu-movil a.mm-link { display: flex; justify-content: space-between; align-items: center; min-height: 54px; padding: 0 6px; font: 500 19px/1.2 var(--sans); border-bottom: 1px solid rgba(255,255,255,.12); }
.menu-movil a.mm-link::after { content: "›"; font-size: 26px; color: var(--uro-luz); }
.menu-movil a.mm-cita { display: flex; justify-content: center; align-items: center; min-height: 54px; margin-top: 8px; border-radius: 999px; background: var(--uro-luz); color: var(--uro-oscuro); font: 600 18px/1 var(--sans); }

/* v3.3 · Selector de idioma (29/09/2026): en la barra, píldora discreta; en el menú móvil, una fila más. */
nav.links a.idioma { padding: 6px 14px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; }
nav.links a.idioma:hover { border-color: var(--uro-luz); }
nav.links a { white-space: nowrap; }

/* v3.4 · Botón del asistente ANA (29/09/2026): «Consulta y pide tu cita» con el logo, un 30 % más grande (14→18 px, logo 26→34 px).
   En móvil el panel ocupa toda la pantalla y sigue a la zona visible cuando sale el teclado (nerva.js pone --vv-alto). */
#bot-open { gap: 10px; padding: 18px 26px; font-size: 18px; }
#bot-open svg { font-size: 34px; width: 34px; height: 34px; }
#bot form input { font-size: 16px; } /* 16 px: iOS no hace zoom al escribir */
@media (max-width: 760px) {
  #bot-open { right: 12px; left: auto; padding: 14px 20px; }
  #bot { inset: auto 0 auto 0; top: var(--vv-arriba, 0); width: 100%; height: var(--vv-alto, 100dvh); max-height: none; border-radius: 0; }
  #bot header { padding: 12px 12px 12px 16px; }
  #bot header b { font-size: 17px; } #bot header small { font-size: 13px; }
  #bot header button { width: 48px; height: 48px; font-size: 30px; }
  #bot-consent { font-size: 16px; }
  html.bot-abierto, html.bot-abierto body { overflow: hidden; }
}

/* Formulario: «Enviar» desactivado hasta marcar la casilla, con el motivo debajo (02/10/2026). */
.cta:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
#f .motivo { margin: -4px 0 0; font-size: 14px; font-weight: 600; color: var(--tinta); }

/* v3.5 · Revisión de vista (02/10/2026): cada pieza cabe en una pantalla y el botón de ANA no tapa nada. */
/* Botón de ANA: siempre con su texto (es la llamada a pedir cita, 02/10/2026); el pie deja sitio debajo para que no tape lo último. */
#bot-open > span { white-space: nowrap; }
footer .wrap { padding-bottom: 112px; }
@media (max-width: 760px) { footer .wrap { padding-bottom: 96px; } }

/* Fichas en móvil y tablet (una columna): primero el título y qué es, con la ilustración; debajo, el proceso y los datos.
   Así cada mitad cabe en una pantalla y la ficha se recorre bajando (encaja en cada mitad). La × se queda visible. */
@media (max-width: 960px) {
  #proc-dlg { scroll-snap-type: y proximity; scroll-padding-top: 8px; }
  #proc-dlg .x { position: sticky; top: 10px; display: block; margin: 10px 10px -50px auto; }
  #proc-dlg .in { display: flex; flex-direction: column; gap: 0; }
  #proc-dlg .ficha { display: contents; }
  #proc-dlg .ficha > * { order: 3; }
  #proc-dlg .ficha > .eyebrow, #proc-dlg .ficha > h3, #proc-dlg #proc-que { order: 1; }
  #proc-dlg .ficha > .eyebrow { padding-right: 46px; scroll-snap-align: start; }
  #proc-dlg .in > div:first-child { order: 2; margin: 0 0 4px; }
  #proc-dlg .ficha > h4 { scroll-snap-align: start; margin-top: 22px; }
  #proc-dlg .cmp-ctrl, #proc-dlg .leyenda, #proc-dlg .nota { margin-top: 8px; }
}
@media (max-width: 520px) {
  #proc-dlg { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  #proc-dlg .in { padding: 16px; }
  #proc-dlg .datos { gap: 6px; }
}

/* Pestañas en escritorio: las tarjetas en más columnas y con la foto apaisada, para que la pestaña entera quepa en la pantalla. */
@media (min-width: 761px) and (max-width: 1100px) {
  .pcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .pcard { padding: 0 16px 16px; gap: 6px; }
  .pcard .pfoto { margin: 0 -16px 4px; aspect-ratio: 16 / 10; }
  .pcard h3, .pag-intima .pcard h3 { font-size: 20px; }
}
@media (min-width: 1101px) {
  .pcards { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 14px; }
  .pcards:has(> li:nth-child(4)) { --cols: 4; }
  .pcards:has(> li:nth-child(5)):not(:has(> li:nth-child(6))), .pcards:has(> li:nth-child(9)) { --cols: 5; }
  .pcard { padding: 0 18px 18px; gap: 6px; }
  .pcard .pfoto { margin: 0 -18px 4px; aspect-ratio: 16 / 10; }
  .pcard h3, .pag-intima .pcard h3 { font-size: 20px; }
  .pcards:has(> li:nth-child(5)) .pcard h3 { font-size: 19px; }
  .tab-panel { padding-top: 12px; }
  .tab-desc { margin-bottom: 10px; }
  .tabs button { padding-block: 11px; }
  /* Ilustraciones con rótulos (Nervo Íntima): enteras, sin recortar los rótulos */
  .pag-intima .pcard .pfoto img { object-fit: contain; background: #fff; }
}

/* Cirugía robótica en escritorio: la sección entera en una pantalla (las fotos se recortan, no estiran la sección). */
@media (min-width: 861px) {
  .robot-sec { padding-block: 48px; }
  .robot-sec .robot { height: clamp(420px, calc(100vh - 58px - 96px - 56px), 680px); }
  .robot-sec .robot .big { min-height: 0; }
  .robot-sec .robot .side { min-height: 0; }
  .robot-sec .robot .side img { min-height: 0; height: 100%; }
}
@media (max-width: 860px) {
  .robot .side img { height: auto; aspect-ratio: 16 / 10; min-height: 0; }
  .robot .side { grid-template-rows: auto auto; }
}

/* Portátiles (poca altura): la portada y la trayectoria caben en una pantalla. */
@media (min-width: 861px) and (max-height: 820px) {
  .hero .wrap { padding-block: 40px 0; }
  .hero .who { padding-bottom: 36px; }
  .hero-id { margin-bottom: 16px; }
  .linea-hero { padding: 64px 0 56px; }
}
@media (min-width: 861px) { .tray { padding-block: 64px; } .tray h2 { margin-bottom: 32px; } }

/* Móvil: botones, casillas y enlaces del pie de 44 px para el dedo; el texto de las casillas, legible (antes 13 px). */
#bot-consent label, #f label[for="rgpd"] { font-size: 15px; line-height: 1.45; }
input[type="checkbox"] { width: 20px; height: 20px; flex: none; accent-color: var(--quirofano); }
@media (max-width: 760px) {
  .cta { min-height: 44px; justify-content: center; }
  #bot-consent label { font-size: 16px; }
  footer .wrap > span:has(> a) a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Tablet vertical (761–860 px): la portada (texto, botones y foto) cabe en una pantalla. */
@media (min-width: 761px) and (max-width: 860px) {
  .hero .wrap { padding-top: 44px; }
  .hero figure { height: 330px; width: min(100%, 440px); margin: 8px auto 0; /* retrato de busto, no una franja de la cara (02/10/2026) */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 78%, transparent 100%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 78%, transparent 100%); mask-composite: intersect; }
  .hero figure img { object-position: 50% 0; }
}
@media (min-width: 561px) and (max-width: 860px) { .marcas-hero { margin-inline: auto; } } /* centrados como el texto de encima */

/* 02/10/2026: botón «Consulta y pide tu cita» con letra más gruesa y más grande, y las frases de cada pestaña
   («Estética genital masculina con criterio urológico.») más gruesas y más grandes, para que se vean mejor. */
#bot-open { font-weight: 700; font-size: 20px; }
@media (max-width: 760px) { #bot-open { font-size: 18px; max-width: calc(100vw - 24px); } }
.tab-desc { font-weight: 400; font-size: 26px; line-height: 1.3; }
@media (max-width: 760px) { .tab-desc { font-size: 22px; } }
.duo-hero span { font-size: 17px; font-weight: 600; line-height: 1.4; }
@media (max-width: 600px) { .duo-hero span { font-size: 16px; } }
@media (max-width: 600px) { .duo-hero span { font-size: 15px; } .duo-hero a { padding: 16px 20px; } .duo-hero b { font-size: 26px; } }
/* 02/10/2026 (2): más legible. Frase de cada pestaña y títulos de las tarjetas, más gruesos y más grandes (la serif fina y cursiva
   a 300 se leía mal); el número de la tarjeta también. Va al final para ganar a los ajustes de tamaño de las pestañas. */
.tab-desc, .pag-intima .tab-desc { font-weight: 500; font-size: 30px; line-height: 1.25; }
.pcard h3, .pag-intima .pcard h3, .pcards:has(> li:nth-child(5)) .pcard h3 { font-weight: 500; font-size: 25px; line-height: 1.2; }
.pcard .pnum { font-size: 14px; }
@media (max-width: 760px) {
  .tab-desc, .pag-intima .tab-desc { font-size: 24px; }
  .pcard h3, .pag-intima .pcard h3, .pcards:has(> li:nth-child(5)) .pcard h3 { font-size: 23px; }
}
@media (min-width: 761px) and (max-height: 820px) { .tab-desc, .pag-intima .tab-desc { font-size: 27px; margin-bottom: 10px; } }
@media (min-width: 761px) and (max-height: 820px) { .pcard h3, .pag-intima .pcard h3, .pcards:has(> li:nth-child(5)) .pcard h3 { font-size: 23px; } }

/* Textos legales (02/10/2026): pie con enlaces, primera capa bajo las casillas y páginas /aviso-legal/, /privacidad/, /cookies/, /tratamiento-de-datos/ */
.pie-legal a { color: inherit; }
.pie-legal small { display: block; font-size: 12px; opacity: .8; }
@media (max-width: 760px) { .pie-legal a { display: inline-flex; align-items: center; min-height: 44px; } }
#bot-consent .capa1 { font-size: 13px; line-height: 1.5; color: #4A5863; }
#bot-consent a, #f .capa1 a, #f label[for="rgpd"] a { color: var(--quirofano); }
.documento { padding: 120px 0 64px; background: var(--blanco); }
.documento .wrap { max-width: 860px; }
.documento h1 { font: 400 clamp(32px, 5vw, 48px)/1.1 var(--serif); color: var(--tinta); margin: 0 0 18px; }
.documento h2 { font: 500 24px/1.25 var(--serif); color: var(--tinta); margin: 40px 0 12px; }
.documento h3 { font: 600 18px/1.3 var(--sans); margin: 28px 0 8px; }
.documento p, .documento li { font-size: 17px; line-height: 1.65; }
.documento a { color: var(--quirofano); overflow-wrap: anywhere; }
.documento .borrador { background: var(--niebla); border-left: 4px solid var(--champan); padding: 12px 16px; font-size: 15px; }
.documento .tabla { overflow-x: auto; margin: 16px 0; }
.documento table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; line-height: 1.5; }
.documento th, .documento td { border-bottom: 1px solid #D5DEE2; padding: 10px 12px; text-align: left; vertical-align: top; }
.documento th { background: var(--niebla); font-weight: 600; }
.documento blockquote { margin: 16px 0; padding: 10px 16px; border-left: 3px solid var(--acero); color: #4A5863; }
@media (max-width: 760px) { .documento { padding-top: 96px; } .documento p, .documento li { font-size: 16px; } }
/* Revisión visual de los textos legales (02/10/2026): primera capa y pie a 14 px, contacto que sigue cabiendo en PC, tablas de 2 columnas sin scroll en el móvil y sombra que avisa del scroll en las anchas. */
#bot-consent .capa1, #f .capa1 { font-size: 14px; line-height: 1.5; color: #4A5863; }
#f .legal { margin: 0; }
.pie-legal, footer .wrap > span:has(> a) { font-size: 14px; }
.pie-legal small { font-size: 14px; }
@media (max-width: 760px) {
  .pie-legal { display: flex; flex-wrap: wrap; column-gap: 18px; font-size: 0; }
  .pie-legal a { font-size: 14px; }
  .pie-legal small { flex-basis: 100%; }
}
@media (min-width: 761px) and (max-height: 820px) { .contact { padding-block: 44px; } }
.documento .borrador { font-size: 16px; border-left-width: 6px; }
.documento table:not(:has(tr > :nth-child(3))) { min-width: 0; }
.documento table:not(:has(tr > :nth-child(3))) td:first-child { width: 32%; }
.documento .tabla {
  background: linear-gradient(to right, var(--blanco) 30%, transparent) left / 40px 100% no-repeat local,
              linear-gradient(to left, var(--blanco) 30%, transparent) right / 40px 100% no-repeat local,
              radial-gradient(farthest-side at 0 50%, rgba(13,34,51,.22), transparent) left / 14px 100% no-repeat scroll,
              radial-gradient(farthest-side at 100% 50%, rgba(13,34,51,.22), transparent) right / 14px 100% no-repeat scroll;
}
.documento table:has(tr > :nth-child(4)) { min-width: 800px; }