/* ============================================================
   Ortover — Sitio
   Prótesis y Plantillas Anatómicas · Veracruz, Ver.
   Static HTML/CSS — sin frameworks, sin build tools.

   PARA CAMBIAR LOS COLORES DEL SITIO ENTERO:
   sólo toca los valores de aquí abajo (:root). Cada color se usa
   por su nombre en todo el archivo, así que un cambio aquí se
   refleja en todas partes.
   ============================================================ */

:root{
  /* Marca — colores tomados del logotipo de Ortover */
  --brand:#29166F;        --brand-dark:#1E1050;   --brand-700:#3E2A9B;
  --accent:#FFF200;       --accent-dark:#E6DA00;  --accent-soft:#FFF59B;
  --cream:#F4F4FA;        --surface:#FFFFFF;      --sage:#E7E8F2;
  --border:#DCDCEC;       --ink:#1A1233;          --muted:#5F5A7A;
  --error:#C0322B;                     /* mensajes de error del formulario */

  /* OJO: la palomita de las listas es un SVG incrustado, y el color de
     marca va escrito ahí dentro como %2329166F (= #29166F = --brand).
     Una variable no se puede meter dentro de un url(), así que si algún
     día cambia --brand hay que cambiar también ese %23...... a mano.
     Por eso vive aquí arriba y no perdida entre las reglas. */
  --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2329166F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");

  --header-h:74px;                     /* alto de la barra superior; el
                                          menú móvil se cuelga de aquí */
  --radius:12px;
  --section-pad:88px;

  --wrap:1180px;
  --serif:'Spectral', Georgia, serif;
  --sans:'Hanken Grotesk', system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;   /* seguro anti-desborde lateral en móvil */
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brand-700);
}
.section{ padding: var(--section-pad) 0; }

/* ---------- Texto justificado ----------
   Los párrafos de texto corrido van justificados, pero SIN partir
   palabras: ver un "me-dida" cortado a la mitad se nota más que un
   renglón con algo de holgura. El precio es que en columnas angostas
   los huecos entre palabras crecen; si algún párrafo se ve mal, la
   salida es alinearlo a la izquierda, no reactivar los guiones.
   Lo que va centrado se queda centrado: justificar y centrar se pelean. */
.lede,
.section-head p,
.trust-item p,
.servicio-body p,
.bloque p,
.toggle-item p,
.faq-item p,
.contacto-info p,
.site-footer p{
  text-align:justify;
  hyphens:manual; -webkit-hyphens:manual; -ms-hyphens:manual;
}
.page-head.centrada .lede{ text-align:center; }
/* Las fichas de producto llevan nombres y etiquetas cortas, no prosa */
.ficha p, .lupa-ficha p{ text-align:left; hyphens:manual; }
/* "Insert-Flex" es un nombre propio: nunca debe partirse en dos renglones
   por el guion. Se usa así:  <span class="nb">Insert-Flex</span>  */
.nb{ white-space:nowrap; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--sans); font-weight:700; font-size:1rem;
  padding:.85em 1.4em; border-radius:var(--radius);
  border:1.5px solid transparent; cursor:pointer; line-height:1;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
/* El amarillo de la marca es muy claro: el texto va en azul oscuro,
   nunca en blanco, porque blanco sobre amarillo no se lee. */
.btn-primary{ background:var(--accent); color:var(--brand-dark); }
.btn-primary:hover{ background:var(--accent-dark); }
.btn-ghost{ background:transparent; color:var(--brand-dark); border-color:var(--brand); }
.btn-ghost:hover{ background:var(--brand); color:#fff; }
.btn-wa{ background:#1FA855; color:#fff; }
.btn-wa:hover{ background:#178A45; }
.btn svg{ width:1.15em; height:1.15em; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-h); gap:24px;
}
.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand img{ width:auto; height:46px; }   /* cuando se suba un logo real */
.nav{ display:flex; align-items:center; gap:30px; }
.nav a{ font-weight:600; font-size:.97rem; color:var(--ink); }
.nav a:hover{ color:var(--brand-700); }   /* el amarillo no se lee sobre blanco */
.nav-cta{ display:flex; align-items:center; gap:12px; }
.header-phone{ display:flex; align-items:center; gap:8px; font-weight:700; color:var(--brand-dark); white-space:nowrap; transition:color .15s ease; }
.header-phone:hover{ color:var(--brand-700); }
.menu-toggle{ display:none; flex:none; background:none; border:0; cursor:pointer; padding:6px; }
.menu-toggle span{ display:block; width:24px; height:2.5px; background:var(--ink); border-radius:2px; margin:5px 0; }

/* Hace que el atributo "hidden" del HTML gane siempre. Sin esto, el
   menú desplegable de Servicios se vería abierto todo el tiempo. */
[hidden]{ display:none !important; }

/* ---------- Menú desplegable de Servicios (escritorio) ---------- */
.nav-drop{ position:relative; }
.nav-drop-btn{
  font-family:var(--sans); font-weight:600; font-size:.97rem; color:var(--ink);
  background:none; border:0; padding:0; cursor:pointer; line-height:inherit;
  display:inline-flex; align-items:center; gap:.35em;
}
.nav-drop-btn:hover{ color:var(--brand-700); }
.nav-drop-btn svg{ width:14px; height:14px; transition:transform .18s ease; }
.nav-drop-btn[aria-expanded="true"]{ color:var(--brand-700); }
.nav-drop-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
.nav-drop-menu{
  position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%);
  /* Sin min-width fijo: el menú se ensancha solo hasta caber el servicio
     de nombre más largo, porque sus renglones no parten el texto. */
  min-width:max-content; z-index:45;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:0 18px 40px -18px rgba(26,18,51,.35);
  padding:8px; display:grid; gap:2px;
}
.nav-drop-menu a{ padding:10px 14px; border-radius:8px; font-size:.95rem; font-weight:600; color:var(--ink); white-space:nowrap; }
.nav-drop-menu a:hover{ background:var(--cream); color:var(--brand-700); }
/* Último renglón del desplegable, separado por una línea */
.nav-drop-menu .ver-todos{
  margin-top:6px; padding-top:14px; border-top:1px solid var(--border);
  font-size:.92rem; color:var(--brand-700);
}

/* ---------- Mismo menú dentro del hamburguesa (móvil) ---------- */
.mobile-drop-btn{
  font-family:var(--sans); font-weight:600; font-size:1rem; color:var(--ink);
  background:none; border:0; border-bottom:1px solid var(--border);
  padding:12px 4px; width:100%; text-align:left; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.mobile-drop-btn svg{ width:16px; height:16px; flex:none; transition:transform .18s ease; }
.mobile-drop-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
.mobile-drop-menu{ display:grid; padding-left:14px; }
.mobile-nav .mobile-drop-menu a{ padding:11px 4px; font-size:.94rem; color:var(--muted); }
.mobile-nav .mobile-drop-menu a:hover{ color:var(--brand-700); }
.mobile-nav .mobile-drop-menu .ver-todos{ color:var(--brand-700); font-weight:700; }

/* ---------- Hero ---------- */
.hero{ background:var(--cream); position:relative; overflow:hidden; }
.hero .wrap{
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  padding-top:var(--section-pad); padding-bottom:var(--section-pad);
}
.hero-copy h1{
  font-family:var(--serif); font-weight:600; color:var(--brand-dark);
  font-size:clamp(2.6rem, 5vw, 4rem); line-height:1.02; letter-spacing:-.015em;
  margin:.5rem 0 0;
}
.hero-copy .lede{
  font-size:1.18rem; color:var(--ink); opacity:.92; margin-top:1.1rem;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:1.8rem; align-items:center; }
.hero-note{ font-size:.92rem; font-weight:600; letter-spacing:.01em; color:var(--ink); }
.hero-note mark{
  background:var(--accent-soft); color:var(--ink);
  font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  padding:.08em .34em; border-radius:4px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.hero-media img{
  width:100%; height:clamp(340px, 42vw, 520px);
  object-fit:cover; border-radius:20px;
}

/* ---------- Trust strip ---------- */
.trust{ background:var(--brand); color:var(--cream); }
.trust .wrap{
  display:grid; grid-template-columns:repeat(3,1fr); gap:36px; padding:44px 24px;
}
.trust-item{ display:flex; gap:14px; align-items:flex-start; }
.trust-item .ico{
  flex:none; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.12); color:var(--accent-soft);
}
.trust-item .ico svg{ width:21px; height:21px; }
/* Son h2 y no h3: la sección no tiene título propio, así que un h3 aquí
   saltaría del h1 de la portada directo al nivel 3. Se ven igual. */
.trust-item h2{ font-family:var(--serif); font-weight:600; font-size:1.18rem; margin:.1rem 0 .25rem; color:#fff; }
.trust-item p{ margin:0; font-size:.95rem; color:#D9D7EC; opacity:.92; line-height:1.5; }

/* ---------- Servicios ---------- */
.servicios{ background:var(--surface); }
.section-head{ max-width:640px; }
/* Mismo tamaño que .bloque h2: un título de sección debe verse igual
   viva dentro de .section o dentro de .bloque. Antes no era así y el de
   abajo salía 22% más chico que el de arriba en la misma página. */
.section-head h2{
  font-family:var(--serif); font-weight:600; color:var(--brand-dark);
  font-size:clamp(1.7rem, 2.8vw, 2.3rem); line-height:1.1; letter-spacing:-.01em;
  margin:.6rem 0 0;
}
.section-head p{ font-size:1.08rem; color:var(--muted); margin-top:.8rem; }
.servicio-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:28px; margin-top:48px;
}
.servicio{
  background:var(--cream); border:1px solid var(--border);
  border-radius:calc(var(--radius) + 6px); overflow:hidden; display:flex; flex-direction:column;
}
.servicio img{ width:100%; height:230px; object-fit:cover; }
.servicio-body{ padding:26px 28px 30px; display:flex; flex-direction:column; flex:1; }
.servicio-body h3{
  font-family:var(--serif); font-weight:600; font-size:1.5rem; color:var(--brand-dark); margin:0;
}
.servicio-body p{ color:var(--ink); opacity:.9; margin:.7rem 0 1.1rem; font-size:1rem; }
.servicio-body ul{ margin:0 0 1.4rem; padding:0; list-style:none; display:grid; gap:.55rem; }
.servicio-body li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.96rem; color:var(--ink); }
.servicio-body li::before, .check-list li::before, .toggle-item summary::before{
  content:""; flex:none; width:18px; height:18px; margin-top:2px; border-radius:50%;
  background:var(--accent-soft) var(--check-icon) center/12px no-repeat;
}
.servicio-body .btn{ margin-top:auto; align-self:flex-start; }

/* ---------- Contacto ---------- */
.contacto{ background:var(--cream); }
.contacto-grid{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:0;
  border:1px solid var(--border); border-radius:calc(var(--radius) + 8px); overflow:hidden;
  margin-top:48px; box-shadow:0 24px 60px -34px rgba(26,18,51,.4);   /* --ink */
}
.contacto-info{ background:var(--brand); color:var(--cream); padding:46px 42px; }
.contacto-info h3{ font-family:var(--serif); font-weight:600; font-size:1.7rem; color:#fff; margin:.4rem 0 0; }
.contacto-info p{ color:#D9D7EC; opacity:.92; margin:.8rem 0 0; font-size:1rem; }
.contact-rows{ margin-top:30px; display:grid; gap:18px; }
.contact-row{ display:flex; gap:14px; align-items:center; }
.contact-row .ico{
  flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.12); color:var(--accent-soft);
}
.contact-row .ico svg{ width:20px; height:20px; }
/* Fila de teléfonos: los números y el botón "Llamar ahora" van lado a
   lado mientras quepan; cuando la columna se angosta (celular), el
   botón se pasa solo al renglón de abajo. */
.tel-bloque{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 20px; }
.btn-llamar{ color:#fff; border-color:rgba(255,255,255,.6); }
.btn-llamar:hover{ background:#fff; color:var(--brand-dark); border-color:#fff; }
.contact-row .label{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-soft); font-weight:700; }
/* Mismo tamaño que las horas (.horario .hrs), para que los tres datos
   del panel —teléfono, dirección y horario— se vean parejos. */
.contact-row .value{ font-size:.99rem; font-weight:600; color:#fff; }
/* Los teléfonos son enlaces: sin esto eran los únicos del panel que no
   daban señal de serlo, entre la dirección y "Cómo llegar" que sí. */
.contact-row .value a{ transition:color .15s ease; }
.contact-row .value a:hover{ color:var(--accent); }
/* La dirección es un enlace a Google Maps. Sin subrayado fijo, porque
   ocupa dos renglones y se vería cargado; el subrayado aparece al pasar
   el mouse, y quien no lo descubra tiene el enlace "Cómo llegar". */
.mapa-link{ color:#fff; border-bottom:1px solid transparent; transition:color .15s ease, border-color .15s ease; }
.mapa-link:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.como-llegar{
  display:inline-flex; align-items:center; gap:.42em;
  margin-top:8px; font-size:.86rem; font-weight:700; color:var(--accent-soft);
}
.como-llegar:hover{ color:var(--accent); }
.como-llegar svg{ width:14px; height:14px; flex:none; }

/* Horario: dos columnas alineadas (días | horas) para que se lea de un
   golpe sin ocupar más renglones que una frase corrida. */
.horario{
  display:grid; grid-template-columns:auto auto;
  justify-content:start; gap:3px 18px; margin-top:3px;
}
.horario .dia{ font-size:.94rem; font-weight:600; color:#C9C5E0; }
/* Cada turno va envuelto en .nb para que, si la columna se angosta, el
   renglón parta entre los dos turnos y nunca a media hora. */
.horario .hrs{ font-size:.99rem; font-weight:600; color:#fff; font-variant-numeric:tabular-nums; }
.nota-cita{ margin-top:7px; font-size:.86rem; font-weight:700; color:var(--accent-soft); }

.contact-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

.contacto-form{ background:var(--surface); padding:46px 42px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.82rem; font-weight:700; color:var(--brand-dark); margin-bottom:7px; letter-spacing:.02em; }
.field input, .field textarea{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  padding:13px 15px; border:1.5px solid var(--border); border-radius:var(--radius);
  background:#fff; transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.field textarea{ resize:vertical; min-height:110px; }
/* Honeypot anti-spam — oculto para humanos, visible para bots */
.hp-field{ position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden; }
.hint-below{
  margin:8px 0 0; display:flex; gap:.5em; align-items:flex-start;
  font-size:.82rem; color:var(--muted); line-height:1.5;
}
.hint-below svg{ width:14px; height:14px; flex:none; margin-top:.15em; stroke:var(--brand-700); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-foot{ display:flex; align-items:center; gap:16px; margin-top:8px; flex-wrap:wrap; }
.form-msg{ font-size:.9rem; font-weight:600; opacity:0; transition:opacity .25s ease; }
.form-msg.show{ opacity:1; }
.form-msg.ok{ color:var(--brand-dark); }
.form-msg.error{ color:var(--error); }
.btn[aria-busy="true"]{ opacity:.7; cursor:progress; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:#E4E1F0; }
.site-footer .wrap{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding:56px 24px 40px; }
.site-footer .name{ font-family:var(--serif); font-size:1.5rem; color:#fff; font-weight:600; }
.site-footer p{ font-size:.92rem; color:#B3AECB; line-height:1.6; margin:.8rem 0 0; max-width:34ch; }
.site-footer h4{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-soft); margin:0 0 14px; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.site-footer a{ color:#CFCBE4; font-size:.95rem; }
.site-footer a:hover{ color:#fff; }
/* Los 4 servicios, colgando de "Servicios" con una guía a la izquierda */
.site-footer .sub{
  margin:10px 0 2px; padding-left:14px; gap:8px;
  border-left:1px solid rgba(255,255,255,.16);
}
.site-footer .sub a{ font-size:.88rem; color:#A9A4C4; }
.site-footer .sub a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); }
.footer-bottom .wrap{ display:flex; justify-content:space-between; padding:18px 24px; font-size:.84rem; color:#8D88A8; }

/* ---------- Redes sociales ----------
   Se usan sobre fondo oscuro: el pie de página y el panel azul de
   contacto. Si algún día van sobre fondo claro, hay que cambiar el
   color del icono, porque hoy es gris claro. */
.social{ display:flex; gap:10px; }
.social a{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:rgba(255,255,255,.08); color:#CFCBE4;
  transition:background .18s ease, color .18s ease;
}
.social a:hover{ background:var(--accent); color:var(--brand-dark); }
.social svg{ width:17px; height:17px; }

/* En el pie: debajo de la descripción de Ortover */
.site-footer .social{ margin-top:22px; }

/* En el panel azul de contacto: con la etiqueta "Síguenos" al lado */
.social-linea{ display:flex; align-items:center; gap:14px; margin-top:26px; flex-wrap:wrap; }
.social-linea .label{
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-soft); font-weight:700;
}

/* ---------- Floating WhatsApp ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:50;
  width:60px; height:60px; border-radius:50%; background:#1FA855;
  display:grid; place-items:center; color:#fff;
  box-shadow:0 14px 30px -8px rgba(31,168,85,.6); transition:transform .15s ease;
}
.wa-float:hover{ transform:scale(1.06); }
.wa-float svg{ width:32px; height:32px; }

/* ---------- Mobile menu ---------- */
.mobile-nav{ display:none; }

/* ============================================================
   SUBPÁGINAS DE SERVICIO  (carpeta servicios/)
   Todo lo de aquí abajo sólo se usa en las páginas de cada
   servicio. La portada (index.html) no lo toca.
   ============================================================ */

/* ---------- Migas de pan: Inicio › Prótesis de pierna ---------- */
.breadcrumb{ background:var(--cream); border-bottom:1px solid var(--border); }
.breadcrumb .wrap{
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem;
  padding-top:14px; padding-bottom:14px; font-size:.86rem; color:var(--muted);
}
.breadcrumb a{ color:var(--brand-700); font-weight:600; }
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb .sep{ color:#B9B6CC; }

/* ---------- Portada de la subpágina ---------- */
.page-head{ background:var(--cream); }
.page-head .wrap{
  display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center;
  padding-top:64px; padding-bottom:64px;
}
.page-head h1{
  font-family:var(--serif); font-weight:600; color:var(--brand-dark);
  font-size:clamp(2.2rem, 4.2vw, 3.2rem); line-height:1.05; letter-spacing:-.015em;
  margin:.5rem 0 0;
}
.page-head .lede{ font-size:1.12rem; color:var(--ink); opacity:.92; margin-top:1rem; max-width:46ch; }
.page-media img{ width:100%; height:clamp(300px, 36vw, 420px); object-fit:cover; border-radius:20px; }

/* Variante "centrada": título y texto en una columna angosta al centro,
   y la imagen a todo lo ancho debajo. Se usa poniendo
   <section class="page-head centrada"> en vez de <section class="page-head"> */
.page-head.centrada .wrap{ display:block; padding-top:60px; padding-bottom:60px; }
/* El texto crece con la pantalla, pero no llega a los bordes: pasado
   cierto ancho los renglones se vuelven incómodos de seguir, sobre todo
   centrados. Si lo quieres más ancho o más angosto, mueve el 720px. */
.page-head.centrada .page-head-texto{ max-width:min(720px, 92%); margin:0 auto; text-align:center; }
.page-head.centrada h1{ margin-top:0; }
/* Y también crece de tamaño: en pantalla grande 1.12rem se veía chico
   frente al título. */
.page-head.centrada .lede{ max-width:none; font-size:clamp(1.12rem, .55vw + .96rem, 1.3rem); }
.page-head.centrada .hero-actions{ justify-content:center; }
.page-head.centrada .page-media{ margin-top:40px; }
.page-head.centrada .page-media img{ height:clamp(280px, 34vw, 440px); }

/* ---------- Carrusel de fotos y videos ----------
   Cada lámina puede llevar una foto o un video, mezclados como quieras.
   Los puntitos de abajo se generan solos según cuántas láminas haya en
   el HTML: para añadir o quitar una, basta con editar el HTML.
   El alto se ajusta con la variable --alto en cada uso. */
.carrusel{ position:relative; --alto:clamp(280px, 34vw, 440px); }
.carrusel-pista{
  display:flex; height:var(--alto);
  overflow-x:auto; overflow-y:hidden;   /* nunca barra vertical */
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  border-radius:20px; background:var(--sage);
  scrollbar-width:none; -ms-overflow-style:none;
}
.carrusel-pista::-webkit-scrollbar{ display:none; }
.carrusel-slide{ flex:0 0 100%; scroll-snap-align:start; position:relative; }
/* El selector lleva .carrusel de más a propósito: sin él, una regla más
   abajo (.bloque img, que fija un alto) le gana a esta por ir después en
   el archivo, y la foto se desborda de la pista. */
.carrusel .carrusel-slide img,
.carrusel .carrusel-slide video{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:0;
}

/* Pie de foto opcional, sobre un degradado para que se lea encima */
.carrusel-pie{
  position:absolute; left:0; right:0; bottom:0; margin:0;
  padding:30px 18px 14px; font-size:.88rem; line-height:1.4; color:#fff;
  background:linear-gradient(to top, rgba(26,18,51,.75), transparent);
}

/* Flechas */
.carrusel-nav{
  position:absolute; top:calc(var(--alto) / 2); transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; border:0; padding:0; cursor:pointer;
  display:grid; place-items:center; z-index:2;
  background:rgba(255,255,255,.92); color:var(--brand-dark);
  box-shadow:0 6px 18px -6px rgba(26,18,51,.5);
  transition:background .15s ease;
}
.carrusel-nav:hover{ background:#fff; }
.carrusel-prev{ left:12px; }
.carrusel-next{ right:12px; }
.carrusel-nav svg{ width:20px; height:20px; }

/* Puntitos */
.carrusel-puntos{ display:flex; justify-content:center; gap:8px; margin-top:14px; }
.carrusel-punto{
  width:9px; height:9px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:var(--border); transition:background .15s ease, width .15s ease;
}
.carrusel-punto:hover{ background:var(--brand-700); }
.carrusel-punto[aria-current="true"]{ background:var(--brand); width:24px; border-radius:5px; }

/* Sin JavaScript el carrusel se convierte en una tira deslizable: se
   siguen viendo todas las láminas, solo que arrastrando. */
.carrusel:not(.listo) .carrusel-nav{ display:none; }
/* Si todo cabe en pantalla no hay nada que desplazar: sobran controles */
.carrusel.sin-desplazar .carrusel-nav,
.carrusel.sin-desplazar .carrusel-puntos{ display:none; }

/* Las flechas del carrusel aparecen al acercar el mouse, para no tapar
   la foto mientras no hacen falta. Sólo donde hay mouse de verdad: en
   pantallas táctiles no existe el "acercarse", así que ahí se quedan
   siempre a la vista. Con el teclado también aparecen, al recibir foco. */
@media (hover: hover) and (pointer: fine){
  .carrusel.listo .carrusel-nav{ opacity:0; transition:opacity .18s ease, background .15s ease; }
  .carrusel.listo:hover .carrusel-nav,
  .carrusel.listo:focus-within .carrusel-nav{ opacity:1; }
}

/* ---------- Carrusel de videos verticales (formato 9:16) ----------
   Funciona igual que los de arriba —una lámina a la vez, completa— solo
   que con la proporción vertical de un video de celular. El carrusel es
   angosto porque un video vertical lo es: el ancho lo manda el alto que
   se quiera ocupar en la página. Se pueden poner tantos como quieras. */
.carrusel.vertical{ max-width:320px; margin-left:auto; margin-right:auto; }
.carrusel.vertical .carrusel-pista{ height:auto; }
.carrusel.vertical .carrusel-slide{ aspect-ratio:9 / 16; }
.carrusel.vertical .carrusel-nav{ top:50%; }

/* Carrusel que va dentro de un bloque de texto, no en la portada:
   se separa del párrafo de arriba y usa un alto más discreto. */
.carrusel-bloque{ margin-top:40px; --alto:clamp(260px, 30vw, 380px); }

/* ---------- Vista ampliada de una foto (lightbox) ----------
   Se abre al hacer clic en una foto de un carrusel marcado como
   ampliable. El fondo se oscurece y se difumina; la foto se ve completa
   (contain, no recortada) y se puede cambiar con las flechas.
   El HTML de esta vista lo crea main.js, no está escrito en las páginas. */
.lupa{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center; padding:4vmin;
  background:rgba(26,18,51,.82);   /* --ink */
  backdrop-filter:blur(7px) saturate(.9);
  -webkit-backdrop-filter:blur(7px) saturate(.9);
}
/* La tarjeta ampliada: foto a la izquierda, datos a la derecha.
   El texto es texto de verdad — se puede seleccionar y copiar, y los
   buscadores lo leen. */
/* Mismo acomodo que la ficha del carrusel, solo que en grande */
.lupa-ficha{
  display:flex; align-items:center; gap:36px;
  max-width:min(980px, 92vw); max-height:88vh;
  padding:28px 34px; border-radius:14px; background:#fff;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
  /* Nada puede salirse del recuadro blanco: si el texto no cabe, se
     desplaza dentro de la columna de la derecha. */
  overflow:hidden;
}
.lupa-media{
  /* Igual que en la ficha del carrusel: la foto centrada sobre el nombre
     y el logo que van debajo */
  flex:0 0 auto; display:grid; gap:0; justify-items:center;
}
.lupa-media .marca{
  margin:14px 0 0; font-family:var(--sans); font-size:.95rem; font-weight:600;
  color:var(--muted); line-height:1.3;
}
.lupa-media .marca b{ font-weight:700; color:var(--ink); }
/* Varios logotipos traen su lema debajo del nombre, así que a igual
   altura el nombre se ve más chico que en un logotipo sin lema. Por eso
   aquí van más grandes, con un tope de ancho para que el de Ottobock
   —que es puro nombre y muy alargado— no se dispare. */
.lupa-media .marca img{
  display:block; height:34px; width:auto; max-width:min(200px, 100%);
  object-fit:contain; object-position:center;
}
.lupa-ficha img{
  width:auto; height:auto;
  max-height:70vh; max-width:40vw; object-fit:contain;
}
/* El modelo encabeza la columna de la derecha */
.lupa-texto .modelo{
  margin:0 0 12px; font-family:var(--serif); font-weight:600; line-height:1.05;
  font-size:clamp(1.6rem, 3.4vw, 2.4rem); color:var(--brand-dark);
}
.lupa-texto{ flex:1 1 auto; min-width:0; max-height:100%; overflow-y:auto; }
.lupa-texto .tipo{
  margin:0; font-family:var(--sans); font-size:1.05rem; font-weight:700;
  color:var(--brand-700); line-height:1.4;
}
.lupa-texto .ficha-lista{
  margin:16px 0 0; padding:0 0 0 1.15em; display:grid; gap:.5rem;
}
.lupa-texto .ficha-lista li{
  font-family:var(--sans); font-size:.98rem; line-height:1.45; color:var(--ink);
}
.lupa-texto .ficha-lista li::marker{ color:var(--brand-700); }
.lupa-btn{
  position:absolute; display:grid; place-items:center; cursor:pointer;
  width:46px; height:46px; border-radius:50%; border:0; padding:0;
  background:rgba(255,255,255,.92); color:var(--brand-dark);
  box-shadow:0 8px 22px -8px rgba(0,0,0,.6);
  transition:background .15s ease;
}
.lupa-btn:hover{ background:#fff; }
.lupa-btn svg{ width:22px; height:22px; }
.lupa-prev{ left:max(14px, 2vw); top:50%; transform:translateY(-50%); }
.lupa-next{ right:max(14px, 2vw); top:50%; transform:translateY(-50%); }
.lupa-cerrar{ top:max(14px, 2vh); right:max(14px, 2vw); }
.lupa-cuenta{
  position:absolute; bottom:max(14px, 2vh); left:50%; transform:translateX(-50%);
  font-size:.86rem; font-weight:700; color:#fff;
  background:rgba(0,0,0,.45); padding:6px 14px; border-radius:999px;
}
/* Mientras la vista ampliada está abierta, la página de atrás no se mueve */
body.lupa-abierta{ overflow:hidden; }

/* Las fotos que se pueden ampliar avisan que son clicables */
.carrusel[data-ampliable] .carrusel-slide img{ cursor:zoom-in; }
/* main.js les pone role="button" y tabindex, igual que a las tarjetas de
   la rejilla de pies, así que reciben foco con el tabulador. Sin esto
   eran las únicas que no mostraban dónde está parado el teclado. */
.carrusel[data-ampliable] .carrusel-slide img:focus-visible{
  outline:2px solid var(--brand-700); outline-offset:-3px;
}

@media (max-width: 760px){
  /* En celular la tarjeta se apila, pero conserva el orden:
     foto, modelo debajo, y después el texto descriptivo.
     Aquí el que se desplaza es el recuadro completo, no una columna:
     de otro modo quedarían dos zonas desplazables anidadas. */
  .lupa-ficha{
    flex-direction:column; align-items:flex-start; gap:14px;
    padding:18px 20px 22px;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .lupa-ficha img{ max-width:74vw; max-height:38vh; }
  /* Apilada, la tarjeta se lee como una sola columna: la marca vuelve a
     la izquierda para arrancar en la misma línea que el modelo y las
     características de abajo. La foto sí se queda al centro. */
  .lupa-media{ width:100%; justify-items:start; }
  .lupa-media img{ justify-self:center; }
  .lupa-texto{ width:100%; max-height:none; overflow:visible; }
}

/* En pantallas angostas las flechas estorbaban encima de la tarjeta.
   Bajan al pie, una a cada lado del contador. */
@media (max-width: 620px){
  .lupa{ padding-bottom:82px; }
  .lupa-ficha{ max-height:100%; }
  .lupa-btn{ width:40px; height:40px; }
  .lupa-prev, .lupa-next{ top:auto; bottom:16px; transform:none; }
  .lupa-prev{ left:calc(50% - 86px); right:auto; }
  .lupa-next{ left:calc(50% + 46px); right:auto; }
  .lupa-cuenta{ bottom:22px; }
}

/* ---------- Ficha de producto ----------
   Dos columnas: a la izquierda la foto con el modelo debajo, a la
   derecha el texto descriptivo. Mismo acomodo en el carrusel y en la
   vista ampliada. Las tipografías son las del sitio: Spectral para el
   modelo (igual que los títulos) y Hanken Grotesk para lo demás.
   El texto vive en el HTML, no dibujado dentro de la imagen. */
.ficha{
  margin:0; height:100%; display:flex; align-items:center; gap:18px;
  background:#fff; padding:14px 18px; text-align:left;
}
.ficha-media{
  flex:0 0 40%; min-width:0; height:100%;
  display:grid; grid-template-rows:1fr auto; gap:0; align-content:center;
  /* Lo que va bajo la foto comparte eje central con ella */
  justify-items:center;
}
.ficha-media .modelo{ margin-top:8px; }
/* La ficha vive dentro de un desplegable, y .toggle-item p le mete 46px de
   sangría izquierda a todos sus párrafos. Sin anularla, el texto sale
   corrido a la derecha y la foto queda descentrada respecto a él.
   Hace falta más peso que .toggle-item p, de ahí los dos niveles. */
.ficha .modelo, .ficha .marca{ padding:0; }
.ficha-media .modelo, .ficha-media .marca{ text-align:center; }
.carrusel .carrusel-slide .ficha img{
  width:100%; height:100%; min-height:0;
  object-fit:contain; object-position:center center; background:#fff;
}
.ficha .modelo{
  margin:0; font-family:var(--serif); font-weight:600; line-height:1.1;
  font-size:1.15rem; color:var(--brand-dark);
}
/* La marca se muestra con su logotipo. Si falta el archivo del logo,
   el generador deja el nombre en texto y se usa este mismo estilo. */
.ficha .marca{
  margin:6px 0 0; font-family:var(--sans); font-size:.82rem; font-weight:600;
  color:var(--muted); line-height:1.2;
}
.ficha .marca b{ font-weight:700; color:var(--ink); }
.ficha .marca img{
  display:block; height:15px; width:auto; max-width:100%; margin:0 auto;
  object-fit:contain; object-position:center;
}
.ficha-datos{ flex:1 1 auto; min-width:0; max-height:100%; overflow:hidden; display:flex; flex-direction:column; justify-content:center; }
/* En las rodillas el modelo encabeza esta columna, sobre el tipo y los
   puntos. Alineado a la izquierda con ellos, no centrado como la marca. */
.ficha-datos .modelo{ margin:0 0 9px; }
.ficha .tipo{
  margin:0; font-family:var(--sans); font-size:.95rem; font-weight:700;
  color:var(--brand-700); line-height:1.35;
}
/* En el carrusel se muestran las características completas. El tipo de
   rodilla no se repite aquí: ya lo dice la pestaña de arriba. */
.carrusel .ficha .tipo{ display:none; }
.carrusel .ficha-lista{
  margin:0; padding:0 0 0 1.05em; display:grid; gap:.36rem;
  max-height:100%; overflow-y:auto;
}
.carrusel .ficha-lista li{
  font-family:var(--sans); font-size:.82rem; line-height:1.35; color:var(--ink);
}
.carrusel .ficha-lista li::marker{ color:var(--brand-700); }

/* ---------- Rejilla de fichas (los pies) ----------
   A diferencia de las rodillas, los pies no tienen categorías: son una
   sola cuadrícula. Cada tarjeta muestra foto, modelo y marca; las
   características aparecen al ampliar. Las columnas se acomodan solas
   según el ancho, sin puntos de quiebre fijos. */
.rejilla-fichas{
  display:grid; gap:14px; margin-top:18px;
  grid-template-columns:repeat(auto-fill, minmax(148px, 1fr));
}
.rejilla-fichas .ficha{
  display:flex; flex-direction:column; height:auto; gap:0;
  /* align-items:stretch anula el "center" que trae .ficha: en columna,
     centrar hace que los hijos se encojan a su contenido y entonces el
     texto no queda centrado respecto a la tarjeta, sino a sí mismo. */
  align-items:stretch;
  padding:14px 12px 12px; text-align:center; cursor:zoom-in;
  border:1px solid var(--border); border-radius:var(--radius);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.rejilla-fichas .ficha:focus-visible{ outline:2px solid var(--brand-700); outline-offset:2px; }
.rejilla-fichas .ficha:hover{
  border-color:var(--brand-700);
  box-shadow:0 8px 20px -12px rgba(26,18,51,.45);
}
.rejilla-fichas .ficha-media{ display:block; flex:none; height:auto; min-width:0; }
.rejilla-fichas .ficha img{
  width:100%; height:128px; object-fit:contain; padding:0; background:#fff;
}
/* La sangría del desplegable ya la anula .ficha .modelo, .ficha .marca */
.rejilla-fichas .ficha p{ text-align:center; }
.rejilla-fichas .modelo{ margin-top:10px; font-size:.94rem; line-height:1.15; }
.rejilla-fichas .marca{ margin-top:7px; font-size:.78rem; }
/* En la tarjeta el logo va centrado, como el resto del texto */
.rejilla-fichas .marca img{ height:14px; margin:0 auto; object-position:center; }
/* Estos dos traen su lema debajo del nombre, así que a igual altura el
   nombre sale más chico que en un logotipo de puro nombre. Van algo más
   grandes para que los cuatro pesen parecido en la tarjeta.
   El selector se apoya en el nombre del archivo, que es el mismo que la
   marca: ossur.png, collegepark.png. */
.rejilla-fichas .marca img[src*="ossur"],
.rejilla-fichas .marca img[src*="collegepark"]{ height:19px; }
/* El tipo y la lista de características sólo se ven al ampliar */
.rejilla-fichas .ficha-datos{ display:none; }

/* En celular el desplegable roba mucho margen izquierdo */
@media (max-width: 560px){
  .toggle-extra{ padding-left:18px; }
  .ficha{ gap:12px; padding:12px 14px; }
  .ficha-media{ flex-basis:44%; }
  /* Sólo el modelo de la columna de texto, o sea el de las rodillas.
     El de los pies vive en .ficha-media y ya tiene su propio tamaño en
     .rejilla-fichas: si se toca aquí, CRECE en pantalla angosta. */
  .ficha-datos .modelo{ font-size:1.02rem; }
  .ficha .tipo{ font-size:.88rem; }
}

/* ---------- Bloques de contenido ---------- */
.bloque{ background:var(--surface); padding:var(--section-pad) 0; }
.bloque.alt{ background:var(--cream); }
.bloque-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
/* .invertido pone la imagen a la izquierda y el texto a la derecha, para
   que dos bloques seguidos alternen en vez de repetir el mismo acomodo. */
.bloque-grid.invertido .bloque-texto{ order:2; }
.bloque h2{
  font-family:var(--serif); font-weight:600; color:var(--brand-dark);
  font-size:clamp(1.7rem, 2.8vw, 2.3rem); line-height:1.1; margin:.5rem 0 0;
}
.bloque p{ color:var(--ink); opacity:.92; margin:1rem 0 0; font-size:1.02rem; }
/* La entradilla de un bloque va un escalón por encima del cuerpo. Sin
   esta regla heredaba .bloque p y se veía idéntica a un párrafo normal,
   que es lo que pasaba en cinco de los once .lede del sitio. */
.bloque .lede{ font-size:1.1rem; opacity:1; }
.bloque img{ width:100%; height:clamp(260px, 30vw, 360px); object-fit:cover; border-radius:18px; }

/* Aclaración del asterisco de un dato que depende de cada caso. Es letra
   pequeña de verdad: tiene que poder leerse, pero no competir con el
   texto de la sección. Va al final del bloque, no pegada al dato. */
.nota-pie{
  margin:2rem 0 0; font-size:.78rem; line-height:1.5;
  color:var(--muted); opacity:.75; max-width:820px;
}

/* Lista con palomita — reutiliza el estilo de las tarjetas de servicio */
.check-list{ margin:1.4rem 0 0; padding:0; list-style:none; display:grid; gap:.6rem; }
.check-list li{ display:flex; gap:.6rem; align-items:flex-start; font-size:1rem; color:var(--ink); }

/* ---------- "Los Componentes": dos columnas ----------
   En computadora, el título y el párrafo de entrada se quedan a la
   izquierda y los desplegables ocupan la derecha. Así los carruseles de
   rodilla que viven dentro del desplegable ganan ancho. En pantallas
   angostas se apila: primero el título, luego los componentes. */
.componentes-grid{
  display:grid; grid-template-columns:minmax(240px, 32%) 1fr; gap:48px;
  align-items:start;
}
/* Los párrafos de la entrada no llevan tope de ancho: en computadora ya
   los angosta la columna, y al apilarse ocupan todo el bloque, los dos
   por igual. */
.componentes-grid .lista-toggle{ margin-top:0; }
@media (max-width: 980px){
  .componentes-grid{ grid-template-columns:1fr; gap:26px; }
}

/* ---------- "Regresarte tu independencia": texto y videos ----------
   En computadora el texto va a la izquierda y la tira de videos
   verticales a la derecha, centrada respecto al texto. En pantallas
   angostas se apila y los videos quedan debajo. */
.independencia-grid{
  display:grid; grid-template-columns:1fr minmax(280px, 340px); gap:56px;
  align-items:center;
}
.independencia-grid .carrusel.vertical{ margin-top:0; }
@media (max-width: 980px){
  .independencia-grid{ grid-template-columns:1fr; gap:34px; }
}

/* ---------- Lista desplegable ----------
   Como la lista con palomita, pero cada punto se abre y muestra una
   explicación corta. Usa el mismo acordeón nativo que las preguntas
   frecuentes, sin JavaScript. */
.lista-toggle{ display:grid; gap:10px; margin:1.4rem 0 0; }
.toggle-item{
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--cream); overflow:hidden;
}
.toggle-item summary{
  cursor:pointer; list-style:none;
  padding:14px 18px; display:flex; align-items:center; gap:.65em;
  font-size:1rem; font-weight:700; color:var(--brand-dark);
}
.toggle-item summary::-webkit-details-marker{ display:none; }
.toggle-item summary::before{ margin-top:0; }   /* centrada, no alineada al texto */
.toggle-item summary::after{
  content:"+"; margin-left:auto; flex:none;
  font-size:1.4rem; line-height:1; color:var(--brand-700);
}
.toggle-item[open] summary::after{ content:"–"; }
.toggle-item summary:hover{ color:var(--brand-700); }
.toggle-item p{
  margin:0; padding:0 18px 16px 46px;   /* 46px = alineado bajo el texto */
  font-size:.96rem; line-height:1.55; color:var(--ink); opacity:.9;
}
/* Contenido extra dentro de un desplegable (por ejemplo, las pestañas
   de tipos de rodilla), alineado igual que el párrafo */
.toggle-extra{ padding:0 18px 18px 46px; }

/* ---------- Pestañas ----------
   Para comparar variantes de una misma cosa sin salir del bloque.
   Si el JavaScript no corre, las pestañas se ocultan y se ven los
   cuatro textos uno debajo de otro: nada queda inaccesible. */
.tabs{ margin-top:16px; }
.tabs-lista{
  display:flex; gap:6px; overflow-x:auto; padding-bottom:3px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.tabs-lista::-webkit-scrollbar{ display:none; }
.tabs-lista button{
  flex:none; cursor:pointer;
  font-family:var(--sans); font-size:.9rem; font-weight:700;
  padding:9px 15px; border-radius:999px; line-height:1;
  border:1.5px solid var(--border); background:var(--surface); color:var(--muted);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.tabs-lista button:hover{ color:var(--brand-700); border-color:var(--brand-700); }
.tabs-lista button[aria-selected="true"]{
  background:var(--brand); border-color:var(--brand); color:#fff;
}
.tabs-panel{ margin-top:15px; }
.tabs-panel p{ margin:0; padding:0; font-size:.96rem; line-height:1.55; color:var(--ink); opacity:.9; }
/* Carrusel dentro de una pestaña. El alto lo manda la ficha con más
   características (siete): tiene que caber sin que haya que desplazar. */
.tabs-panel .carrusel{ margin-top:16px; --alto:clamp(300px, 34vw, 380px); }
/* Las fotos de rodilla van recortadas al ras, así que son altas y
   angostas: no necesitan mucho ancho y la lista lo aprovecha mejor. */
.tabs-panel .ficha-media{ flex-basis:28%; }
.tabs:not(.listo) .tabs-lista{ display:none; }
.tabs:not(.listo) .tabs-panel[hidden]{ display:block !important; }
.tabs:not(.listo) .tabs-panel{ border-top:1px solid var(--border); padding-top:14px; }

/* ---------- Preguntas frecuentes (acordeón nativo, sin JS) ---------- */
.faq{ background:var(--surface); }
.faq.alt{ background:var(--cream); }          /* para alternar con el bloque de arriba */
.faq.alt .faq-item{ background:var(--surface); }
.faq-list{ margin-top:40px; max-width:820px; display:grid; gap:12px; }
.faq-item{
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--cream); overflow:hidden;
}
.faq-item summary{
  cursor:pointer; list-style:none; padding:18px 22px;
  font-weight:700; font-size:1.02rem; color:var(--brand-dark);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.5rem; line-height:1; color:var(--brand-700); flex:none; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item summary:hover{ color:var(--brand-700); }
.faq-item p{ margin:0; padding:0 22px 20px; color:var(--ink); opacity:.9; font-size:.98rem; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px){
  /* El teléfono del header ya no cabe junto al menú + botón */
  .header-phone{ display:none; }
  .hero .wrap{ grid-template-columns:1fr; gap:36px; }
  .hero-media img{ height:clamp(280px,55vw,420px); }
  .servicio-grid{ grid-template-columns:1fr; }
  .contacto-grid{ grid-template-columns:1fr; }
  .trust .wrap{ grid-template-columns:1fr; gap:24px; }
  .site-footer .wrap{ grid-template-columns:1fr 1fr; }
  /* Las subpáginas no necesitan nada aquí: usan .page-head.centrada, que
     ya se apila sola y fija la altura de su imagen. */
  .bloque-grid{ grid-template-columns:1fr; gap:28px; }
  .bloque-grid.invertido .bloque-texto{ order:0; }   /* apilado, el texto primero */
}
/* Menú hamburguesa: entra antes (760px) porque menú + botón ya no caben */
@media (max-width: 760px){
  .site-header .wrap{ gap:12px; }
  .brand img{ height:38px; }   /* logo más chico para que quepa la fila */
  .nav{ display:none; }
  .menu-toggle{ display:block; }
  /* El botón largo "Agenda tu valoración" se mueve al menú hamburguesa… */
  .nav-cta .btn{ display:none; }
  /* …y en su lugar queda un botón redondo de llamada, siempre a la vista */
  .header-phone{
    display:grid; place-items:center; gap:0; flex:none;
    width:42px; height:42px; border-radius:50%;
    background:var(--brand); color:#fff;
  }
  .header-phone span{ display:none; }
  .header-phone svg{ width:20px; height:20px; }
  .mobile-nav.open{
    display:flex; flex-direction:column; gap:4px;
    position:fixed; inset:var(--header-h) 0 auto 0; z-index:39;
    background:var(--surface); border-bottom:1px solid var(--border); padding:14px 24px 22px;
  }
  .mobile-nav a{ padding:12px 4px; font-weight:600; border-bottom:1px solid var(--border); transition:color .15s ease; }
  .mobile-nav a:hover{ color:var(--brand-700); }
  .mobile-nav .btn{ margin-top:12px; justify-content:center; }
}
@media (max-width: 680px){
  :root{ --section-pad:60px; }
  .form-row{ grid-template-columns:1fr; }
  .site-footer .wrap{ grid-template-columns:1fr; gap:30px; }
  .footer-bottom .wrap{ flex-direction:column; gap:8px; text-align:center; }
  .contacto-info, .contacto-form{ padding:34px 26px; }
}
/* Teléfonos angostos (iPhone SE y similares) */
@media (max-width: 400px){
  /* Los botones normalmente nunca parten el texto en dos renglones;
     aquí se permite, porque "Quiero mi prótesis de pierna" no cabe
     de un solo renglón en las pantallas más angostas. */
  .page-head .btn{ white-space:normal; text-align:center; }
}

/* Respeta usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .carrusel-pista{ scroll-behavior:auto; }
  *{ transition:none !important; }
}