/* ════════════════════════════════════════════════════════════════════════════
   THE CODT LABS · HOJA DE LAS PÁGINAS INTERIORES
   /precios, /barberias, /peluquerias, /manicura, /caso-the-barber-sevilla

   GENERADO. La primera mitad de este archivo se EXTRAE de the-codt-labs.html
   con ../../. ./thecodtlabs-audit/construir_css.py, leyendo sus comentarios de
   sección. No se edita aquí: se edita en la portada y se vuelve a generar. Así
   las tarjetas de precio de /precios son el mismo componente que las de la
   portada —las pinta el mismo planes-html.js— y no una copia que se queda atrás.

   La portada NO enlaza esta hoja: llevaría una petición que bloquea el
   renderizado justo en la página cuyo LCP estamos peleando. Su CSS sigue
   incrustado, que es la única copia que manda.

   NO es /css/globals.css. Esa otra hoja es el tema de los CLIENTES y pinta a
   ciegas selectores genéricos; estas páginas son de The Codt Labs. Ver el
   comentario largo del <head> de the-codt-labs.html.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --carbon:#2B2824; --marron:#8B7F6A; --taupe:#AFA188; --beige:#CDBFA6;
  --hueso:#F5F2EE; --papel:#FFFFFF;
  --dorado:#E3B059;                 /* el dorado de la marca: RELLENO */
  --dorado-ink:#8F6314;             /* el mismo dorado, para ESCRIBIR */
  --tinta:var(--carbon);
  --tinta2:rgba(43,40,36,.68);      /* 5.4:1 — cumple AA */
  --tinta3:rgba(43,40,36,.55);
  --filete:rgba(43,40,36,.13);
  --filete2:rgba(43,40,36,.28);
  --alto-cab:57px;
  --e:cubic-bezier(.16,.84,.44,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--hueso);color:var(--tinta);
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:300;line-height:1.62;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:Montserrat,system-ui,sans-serif;font-weight:600;letter-spacing:-.022em;line-height:1.08}
img{max-width:100%;height:auto;display:block}
a{color:var(--dorado-ink)}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lienzo{max-width:1080px;margin:0 auto;padding:0 28px}

/* ── HEREDADO DE LA PORTADA (generado — ver cabecera) ─────────────────────── */
    /* ── Botones ────────────────────────────────────────────────────────── */
    .btn{font-family:Montserrat;font-weight:600;font-size:.78rem;padding:12px 22px;border-radius:4px;text-decoration:none;
      display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;cursor:pointer;
      position:relative;overflow:hidden;z-index:0;transition:transform .2s var(--e),background .2s,color .2s,border-color .2s}
    /* font-variant-emoji:text — sin esto, ↗ (NORTH EAST ARROW, U+2197) cae en
       la fuente de emoji a color del sistema en vez de dibujarse con la propia
       tipografía; en iOS se ve como un icono de colores suelto en medio del
       texto, y es justo lo que delata una página como "hecha con IA" sin serlo.
       → (U+2192) no suele fallar, pero se deja igual por si el sistema cambia. */
    .fl{font-variant-emoji:text}
    .btn .fl{transition:transform .2s var(--e)}
    .btn:hover .fl{transform:translateX(4px)}
    .btn-primary{background:var(--carbon);color:var(--hueso)}
    /* La letra pasa a carbon al entrar el dorado: en hueso se quedaria en 1.77. */
    .btn-primary:hover,.btn-primary:focus-visible{transform:translateY(-1px);color:var(--carbon)}
    /* El barrido dorado al pasar: la micro-interaccion de la pagina. */
    .btn-primary::before{content:"";position:absolute;inset:0;background:var(--dorado);transform:scaleX(0);transform-origin:left;
      transition:transform .38s var(--e);z-index:-1}
    .btn-primary:hover::before,.btn-primary:focus-visible::before{transform:scaleX(1)}
    .btn-ghost{border-color:var(--filete2);color:var(--carbon);background:transparent}
    .btn-ghost:hover{border-color:var(--carbon);background:rgba(43,40,36,.04);transform:translateY(-1px)}

    /* ── Seccion ────────────────────────────────────────────────────────── */
    .sec{padding:78px 0;border-top:1px solid var(--filete);scroll-margin-top:calc(var(--alto-cab) + 16px)}
    .sec.primera{border-top:0;padding-top:64px}
    .sec h2{font-size:clamp(1.6rem,3.4vw,2.35rem);margin-bottom:12px;max-width:18ch}
    .sec .intro{color:var(--tinta2);max-width:56ch;font-size:.97rem;margin-bottom:38px}

    /* ── Precios ────────────────────────────────────────────────────────
       Cuatro tarjetas COMPLETAS — cada una con todo lo que trae su plan, sin
       comparar por lo que añade sobre la anterior. Esa comparacion vivio aqui
       una temporada y se ha caido: obligaba a cruzar el catalogo por texto
       exacto (fragil — "QR" con dos redacciones distintas contaba como dos
       ventajas) y a pasar el raton por encima de una columna, con las demas
       apagadas, para leerla bien. Ahora cada tarjeta se lee sola.

       MISMO TAMAÑO LAS CUATRO — el de Pro, con todo escrito, porque es el que
       se quiere vender. Max, que trae mas ventajas que ninguna, no ensancha
       la fila: su lista se recorta a la misma altura que la de Pro y un
       "Ver mas" la despliega. La altura la mide `ajustarTarjetas()` (mas
       abajo, en el JS) DESPUES de pintar — no hay un numero fijo aqui porque
       la lista de cada plan es texto de catalogo, y su alto cambia con el
       ancho de pantalla y con lo que se escriba mañana.

       UN COLOR DE MARCA POR TARJETA, no una escala neutra: Prueba y Basic en
       el hueso de la pagina, Pro en el dorado de la marca —es el que hay que
       vender— y Max en el carbon oscuro que ya lleva el CTA final de la
       pagina (`.final`, mas abajo). Cada fondo trae su propia tinta legible:
       el chequeo, el boton y el texto NO son el mismo color en las cuatro,
       aunque dentro de cada una son un unico color — ya no hay "esto es
       nuevo, esto no": todo lo que ofrece un plan pesa igual en su lista. */
    /* `align-items:start`, y no el `stretch` por defecto del grid: sin esto,
       el propio grid iguala por su cuenta la altura de TODA una fila —en
       escritorio, las cuatro tarjetas son una sola fila—, y al desplegar Max
       con "Ver más" eso arrastraba a Pro a la misma altura con ella. El
       control de quien mide cuanto es de `ajustarTarjetas()` (en el JS), no
       del grid. Visto fallar: Pro crecia solo porque Max habia crecido. */
    .planes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start}
    @media(max-width:1040px){.planes{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:640px){.planes{grid-template-columns:1fr}}
    /* 19-09-2026 · Filete en todas: Prueba y Basic son del mismo color que el
       fondo de la página y se quedaban sin contorno, como si no hubiera tarjeta.
       Las que traen fondo propio (Pro y Max) llevan el suyo, para no doblar línea. */
    .plan{background:var(--hueso);border:1px solid var(--filete);padding:26px 22px;border-radius:8px;display:flex;flex-direction:column;position:relative;
      transition:transform .25s var(--e),box-shadow .25s var(--e);
      /* La entrada al hacerse visible: ver animarEntrada() en el JS. */
      opacity:0;transform:translateY(28px)}
    .plan.plan-entra{opacity:1;transform:none}
    .plan:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(43,40,36,.14)}
    .plan.plan-entra:hover{transform:translateY(-4px)}
    .plan.reco{background:var(--dorado);border-color:var(--dorado)}
    .plan.plan-max{background:var(--carbon);border-color:var(--carbon)}
    .m-sello{display:inline-block;background:var(--carbon);color:var(--hueso);font-family:Montserrat;font-weight:600;
      font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:3px;margin-bottom:10px;align-self:flex-start}
    /* El hueco de la chapa se reserva en las cuatro columnas aunque solo la
       escriba Pro: si no, su nombre baja y la fila de nombres se descuadra. */
    .m-sello.fantasma{visibility:hidden}
    .m-nom{font-family:Montserrat;font-weight:600;font-size:1.08rem;display:block}
    .m-eur{font-family:Montserrat;font-weight:700;font-size:1.9rem;letter-spacing:-.03em;margin-top:4px;display:block}
    .m-eur small{font-size:.36em;font-weight:500;letter-spacing:0;margin-left:3px;opacity:.68}
    /* El hueco del "al dia" se reserva en TODAS las columnas aunque solo lo
       escriba Pro: si no, su boton sube y la fila de botones se descuadra. */
    .m-dia{font-size:.72rem;min-height:1.3em;font-weight:400;display:block;opacity:.7}
    .m-falta{font-size:.72rem;margin-top:6px;opacity:.7}
    /* Cuando el fondo de la tarjeta cambia, TODA su tinta cambia con el —
       nombre, precio, notas y lista—, no solo el chequeo. Sobre hueso se
       escribe en carbon (de siempre); sobre el dorado de Pro y el carbon de
       Max, la tinta se invierte para seguir cumpliendo el contraste. */
    .plan{color:var(--carbon)}
    .plan.reco{color:var(--carbon)}
    .plan.plan-max{color:var(--hueso)}
    .plan.plan-max .m-eur small,.plan.plan-max .m-dia,.plan.plan-max .m-falta{opacity:.72}
    .plan.plan-max .m-sello{background:var(--dorado);color:var(--carbon)}
    /* La lista, y el "ver mas" que la despliega cuando un plan (hoy, Max) trae
       mas ventajas de las que caben en la altura de Pro. `.p-feats-wrap` es lo
       que se recorta —no la lista misma—, para que el boton pueda vivir justo
       debajo del corte sin quedar el tambien recortado. */
    .p-feats-wrap{margin-top:18px;overflow:hidden;transition:max-height .35s var(--e)}
    .p-feats-wrap.desplegado{transition:max-height .45s var(--e)}
    .p-feats{list-style:none;margin:0;display:flex;flex-direction:column;gap:9px}
    .p-feats li{font-size:.85rem;padding-left:22px;position:relative;line-height:1.5;opacity:.88}
    /* El chequeo: UN solo color por tarjeta — ya no hay una marca para "lo de
       siempre" y otra mas gruesa para "lo nuevo de este plan". */
    .p-feats li::before{content:"";position:absolute;left:0;top:.45em;width:11px;height:6px;
      border-left:2px solid var(--dorado-ink);border-bottom:2px solid var(--dorado-ink);transform:rotate(-45deg)}
    .plan.reco .p-feats li::before{border-color:var(--carbon)}
    .plan.plan-max .p-feats li::before{border-color:var(--dorado)}
    /* Mismo criterio que en el alta: lo pendiente nunca lleva marca de incluido. */
    .p-feats li.pendiente{opacity:.6;font-style:italic}
    .p-feats li.pendiente::before{border:0;width:9px;height:9px;border-radius:50%;
      box-shadow:0 0 0 1.5px currentColor inset;transform:none;top:.5em;opacity:.7}
    /* Hueco reservado: ocupa la línea, no enseña nada (ni texto ni check). */
    .p-feats li.vacio{visibility:hidden}
    .p-vermas{display:none;align-self:flex-start;margin-top:10px;background:none;border:0;padding:0;
      font-family:Montserrat;font-weight:600;font-size:.72rem;letter-spacing:.05em;cursor:pointer;
      color:inherit;opacity:.75;text-decoration:underline;text-underline-offset:3px;transition:opacity .2s var(--e)}
    .p-vermas:hover,.p-vermas:focus-visible{opacity:1}
    .p-vermas.mostrar{display:inline-block}
    .p-cta{margin-top:auto;padding-top:20px}
    .p-cta .btn{width:100%}
    .iva{color:var(--tinta2);font-size:.78rem;margin-top:16px}
    .cargando{color:var(--tinta2);font-size:.9rem;padding:26px 0}

    /* El boton invita primero ("Únete") y concreta al acercarse ("Empezar con
       Pro", "Probar gratis"…) — y AL COLOREARSE: pasa de contorno a relleno,
       con la tinta que mejor lee sobre el fondo de SU tarjeta. Es de bloque y
       de ancho fijo, asi que el cambio de palabra no mueve nada de sitio. */
    .p-btn{position:relative;border:1.5px solid currentColor;background:transparent;color:inherit;
      transition:background .2s var(--e),color .2s var(--e),border-color .2s var(--e)}
    .p-btn .a{transition:opacity .18s ease}
    .p-btn .b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s ease}
    .p-btn:hover,.p-btn:focus-visible,.p-btn:active{background:var(--carbon);border-color:var(--carbon);color:var(--hueso)}
    .plan.plan-max .p-btn:hover,.plan.plan-max .p-btn:focus-visible,.plan.plan-max .p-btn:active{
      background:var(--dorado);border-color:var(--dorado);color:var(--carbon)}
    .p-btn:hover .a,.p-btn:focus-visible .a,.p-btn:active .a{opacity:0}
    .p-btn:hover .b,.p-btn:focus-visible .b,.p-btn:active .b{opacity:1}
    /* Sin raton no hay "acercarse": en el movil el boton se queda coloreado y
       diciendo a que te apuntas desde el principio — de siempre, no solo al
       tocarlo, porque un dedo no "pasa por encima" antes de decidir tocar. */
    @media(hover:none){
      .p-btn{background:var(--carbon);border-color:var(--carbon);color:var(--hueso)}
      .plan.plan-max .p-btn{background:var(--dorado);border-color:var(--dorado);color:var(--carbon)}
      .p-btn .a{opacity:0}.p-btn .b{opacity:1}
    }

    /* ── Comparativa con el mercado ─────────────────────────────────────── */
    .tabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--filete);border-radius:8px;background:var(--papel)}
    table.comp{width:100%;border-collapse:collapse;min-width:640px}
    table.comp th,table.comp td{padding:15px 18px;text-align:left;font-size:.87rem;border-bottom:1px solid var(--filete);vertical-align:top}
    table.comp th{font-family:Montserrat;font-weight:600;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta2)}
    /* La columna "Con nosotros" lleva el mismo dorado que la tarjeta Pro: es
       la que queremos vender aqui tambien. */
    table.comp th.mio{color:var(--carbon);background:var(--dorado)}
    table.comp td{color:var(--tinta2)}
    table.comp td.mio{background:rgba(227,176,89,.16);color:var(--carbon);font-weight:600;padding-left:42px;position:relative}
    /* El mismo check que en las tarjetas de precios — un solo color, sin reinventar la marca. */
    table.comp td.mio::before{content:"";position:absolute;left:18px;top:20px;width:11px;height:6px;
      border-left:2px solid var(--dorado-ink);border-bottom:2px solid var(--dorado-ink);transform:rotate(-45deg)}
    table.comp td.no{color:var(--tinta3)}
    table.comp tbody tr:last-child td{border-bottom:0}
    table.comp tbody tr:hover td{background:rgba(43,40,36,.03)}
    table.comp tbody tr:hover td.mio{background:rgba(227,176,89,.28)}

    /* ── FAQ ────────────────────────────────────────────────────────────── */
    .faq details{border-bottom:1px solid var(--filete)}
    .faq summary{cursor:pointer;list-style:none;padding:18px 4px;font-family:Montserrat;font-weight:500;font-size:.98rem;
      display:flex;justify-content:space-between;gap:16px;align-items:center;transition:color .2s var(--e)}
    .faq summary::-webkit-details-marker{display:none}
    .faq summary:hover,.faq summary:focus-visible{color:var(--dorado-ink)}
    .faq summary .mas{color:var(--dorado-ink);font-size:1.2rem;line-height:1;transition:transform .3s var(--e)}
    .faq details[open] summary .mas{transform:rotate(45deg)}
    .faq p{color:var(--tinta2);font-size:.9rem;padding-bottom:18px;max-width:64ch}

/* ══════════════════════════════════════════════════════════════════════════
   LO QUE SOLO EXISTE EN LAS PÁGINAS INTERIORES
   ══════════════════════════════════════════════════════════════════════════ */

/* ── LAS TARJETAS DE PRECIO NACEN VISIBLES ────────────────────────────────
   El bloque heredado las trae con `opacity:0; transform:translateY(28px)` y
   las descubre `animarEntrada()`, que vive en el <script> de la portada. Aquí
   no hay ese JS: sin esto, /precios servía las cuatro tarjetas en el HTML y
   dejaba un hueco en blanco donde tenían que estar. Visto fallar en la captura.

   Y no es solo que se vea mal: `opacity:0` es texto OCULTO para el
   renderizador de Google. Justo lo contrario de lo que veníamos a arreglar en
   la página que tiene que posicionar por "precio". */
.plan{opacity:1;transform:none}

/* Y con la misma altura las cuatro. En la portada las iguala `ajustarTarjetas()`
   —mide y recorta la lista mas larga con un "Ver mas"—, que aqui tampoco corre.
   `stretch` lo consigue sin JS: `.p-cta` ya lleva `margin-top:auto`, asi que los
   cuatro botones quedan a la misma linea, que es lo que se mira al comparar. */
.planes{align-items:stretch}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:60;background:rgba(245,242,238,.88);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--filete)}
.top .in{max-width:1240px;margin:0 auto;padding:14px 28px;display:flex;
  align-items:center;justify-content:space-between;gap:16px}
.marca{font-family:Montserrat;font-weight:700;font-size:.8rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--carbon);text-decoration:none}
.marca b{font-weight:700;color:var(--dorado-ink)}

/* Iniciar sesion: a la derecha, antes del CTA. Discreto a proposito: quien ya es
   cliente lo busca y lo encuentra; quien todavia no lo es tiene delante "Crear mi
   cuenta", que es lo que esta pagina quiere que pulse. En movil se queda en
   "Entrar": con la marca y el CTA, "Iniciar sesion" no cabe en 360 px. */
.top-acc{display:flex;align-items:center;gap:18px}
.top-entrar{font-size:.8rem;font-weight:600;color:var(--carbon);text-decoration:none;
  border-bottom:1px solid var(--filete2);padding:2px 0;white-space:nowrap}
.top-entrar:hover{border-bottom-color:var(--carbon)}
.top-entrar-corto{display:none}
@media(max-width:420px){.top-acc{gap:12px}.top-entrar-largo{display:none}.top-entrar-corto{display:inline}}


/* La miga de pan es un ancla real a la portada, no un adorno: en una página
   interior es el único camino de vuelta que se ve sin desplegar nada. */
.miga{font-size:.78rem;color:var(--tinta2);padding:22px 0 0}
.miga a{color:var(--tinta2);text-decoration:none;border-bottom:1px solid var(--filete2)}
.miga a:hover{color:var(--carbon)}
.miga span{margin:0 7px;color:var(--tinta3)}

/* ── Héroe de página interior ─────────────────────────────────────────────
   Dos columnas en escritorio: lo que se dice a la izquierda, la foto a la
   derecha. En móvil la foto va DEBAJO del titular, nunca encima: lo primero
   que tiene que leerse es de qué va la página. */
.cabeza{padding:46px 0 64px}
.cabeza .par{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
@media(min-width:900px){.cabeza .par{grid-template-columns:1fr 1fr;gap:56px}}
.rotulo{font-family:Montserrat;font-weight:700;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dorado-ink);margin-bottom:16px;display:block}
.cabeza h1{font-size:clamp(1.95rem,5vw,3.05rem);margin-bottom:18px;max-width:15ch}
.cabeza .entradilla{color:var(--tinta2);font-size:1.03rem;max-width:46ch;margin-bottom:28px}
.cabeza .acciones{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cabeza .nota{font-size:.82rem;color:var(--tinta2);margin-top:14px}
.marco{border:1px solid var(--filete);border-radius:6px;overflow:hidden;background:var(--papel)}
.marco img{width:100%}

/* ── Retícula de puntos (los problemas de cada sector) ───────────────────── */
.puntos{display:grid;grid-template-columns:1fr;gap:1px;background:var(--filete);
  border:1px solid var(--filete);border-radius:6px;overflow:hidden}
@media(min-width:700px){.puntos{grid-template-columns:1fr 1fr}}
.punto-f{background:var(--hueso);padding:28px 26px}
.punto-f h3{font-size:1.02rem;margin-bottom:9px}
.punto-f p{color:var(--tinta2);font-size:.94rem}
/* El número no decora: dice que son pasos y en qué orden. Misma chapa carbón
   que muerde la foto en la portada. */
.punto-f .n{font-family:Montserrat;font-weight:700;font-size:.7rem;letter-spacing:.14em;
  color:var(--dorado-ink);display:block;margin-bottom:12px}

/* El proyecto ACTUAL, dentro de la lista de los que no salieron. Se distingue
   con el mismo dorado que marca el plan recomendado en precios: es el unico
   acento de la casa y aqui dice "y este es el que sigue en pie". */
.punto-f.actual{background:var(--papel);box-shadow:inset 3px 0 0 var(--dorado)}
.punto-f.actual .n{color:var(--dorado-ink)}

/* ── Franja con una foto a lo ancho ───────────────────────────────────────── */
.franja{margin:0;border-top:1px solid var(--filete);border-bottom:1px solid var(--filete)}
.franja .cont{display:grid;grid-template-columns:1fr;gap:0;align-items:stretch}
@media(min-width:900px){.franja .cont{grid-template-columns:1.05fr .95fr}}
/* El texto de la franja se alinea con `.lienzo`, no se centra en su columna.
   Centrado empezaba 75px a la izquierda del resto de la pagina y el ojo lo
   notaba: parecia otra retícula. `max()` deja el mismo borde izquierdo que
   tiene todo lo demas, y en movil cae al padding normal de 28px. */
.franja .txt{padding:56px 44px 56px max(28px, calc((100vw - 1080px) / 2 + 28px));
  margin:0;align-self:center}
@media(max-width:899px){.franja .txt{padding:48px 28px}}
.franja .foto{min-height:280px;background:var(--beige)}
.franja .foto img{width:100%;height:100%;object-fit:cover}
.franja h2{font-size:clamp(1.5rem,3.2vw,2.1rem);margin-bottom:14px;max-width:17ch}
.franja p{color:var(--tinta2);margin-bottom:14px}

/* ── Listas de ventajas ───────────────────────────────────────────────────── */
.lista{list-style:none;margin:18px 0 0}
.lista li{position:relative;padding-left:26px;margin-bottom:11px;color:var(--tinta2);font-size:.95rem}
.lista li::before{content:"";position:absolute;left:0;top:.52em;width:12px;height:6px;
  border-left:1.6px solid var(--dorado-ink);border-bottom:1.6px solid var(--dorado-ink);
  transform:rotate(-45deg)}

/* ── Prosa larga (/sobre-mi) ──────────────────────────────────────────────
   Muchos parrafos cortos seguidos. `.intro` lleva 38px debajo porque abre una
   rejilla; aqui cada parrafo va pegado al siguiente como en una carta. */
.sec .prosa h2{max-width:24ch;margin-bottom:22px}
.prosa p{color:var(--tinta2);font-size:.97rem;max-width:62ch;margin-bottom:14px}
.prosa p:last-child{margin-bottom:0}
.prosa .lista{margin:6px 0 20px;max-width:62ch}
.prosa .destacado,.franja .destacado{color:var(--tinta);font-weight:500;font-size:1.06rem}
.prosa .firma{margin-top:34px;padding-top:22px;border-top:1px solid var(--filete);max-width:62ch;line-height:1.5}
.firma strong{display:block;font-family:Montserrat,system-ui,sans-serif;font-weight:600;color:var(--tinta);font-size:1.05rem;margin-bottom:4px}

/* La fecha de actualizacion. Discreta a proposito: es informacion para quien
   comprueba, y una senal de frescura para las maquinas, no un titular. */
.actualizado{border-top:1px solid var(--filete);padding:22px 0 0;margin-top:8px;
  font-size:.8rem;color:var(--tinta3)}
.actualizado time{color:var(--tinta2)}

/* Capturas de producto dentro del contenido. El marco de un pixel es el mismo
   recurso que usa la portada: la pagina se lee como un documento, no como un
   folleto, y una captura sin marco flota. */
.captura{margin:0;border:1px solid var(--filete);border-radius:6px;overflow:hidden;
  background:var(--papel)}
.captura img{width:100%}
.captura figcaption{padding:12px 16px;border-top:1px solid var(--filete);
  font-size:.84rem;color:var(--tinta2);background:var(--hueso)}
/* La del movil no se estira: a 700px de ancho real quedaria gigante. */
.captura-movil{max-width:300px}

/* ── Cierre ───────────────────────────────────────────────────────────────── */
.cierre{border-top:1px solid var(--filete);padding:74px 0;text-align:center}
.cierre h2{font-size:clamp(1.5rem,3.2vw,2.1rem);margin:0 auto 14px;max-width:20ch}
.cierre p{color:var(--tinta2);max-width:46ch;margin:0 auto 26px}

/* ── Pie con navegación ───────────────────────────────────────────────────
   El pie de la portada era solo una firma. En las páginas interiores hace
   además de mapa: es el único sitio donde se ven todas las páginas del sitio. */
footer{border-top:1px solid var(--filete);padding:48px 28px 40px;background:var(--papel)}
footer .in{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:28px}
/* 09-10-2026 · cuatro columnas: la marca, reservas online, diseño web y guías.
   Con dos listas de «Para tu negocio» y «Más» el pie era un cajón de sastre. */
@media(min-width:560px){footer .in{grid-template-columns:1fr 1fr}footer .in > div:first-child{grid-column:1/-1}}
@media(min-width:1000px){footer .in{grid-template-columns:1.3fr 1fr 1.2fr 1fr}footer .in > div:first-child{grid-column:auto}}
footer .pie-empresa{margin-top:14px}
footer .cod{font-family:Montserrat;font-weight:700;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--carbon);margin-bottom:10px}
footer .cod b{color:var(--dorado-ink)}
footer p{color:var(--tinta2);font-size:.84rem;max-width:34ch}
/* h3 y no h4: el pie va justo detras del <h2> del cierre, asi que un h4 se
   saltaba el nivel intermedio en las cinco paginas. Es jerarquia de documento,
   no estilo — se ve igual. */
footer h3{font-size:.76rem;font-family:Montserrat;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta3);margin-bottom:12px}
footer ul{list-style:none}
footer li{margin-bottom:8px}
footer a{color:var(--tinta2);text-decoration:none;font-size:.88rem}
footer a:hover{color:var(--carbon)}
footer .fin{max-width:1080px;margin:34px auto 0;padding-top:20px;
  border-top:1px solid var(--filete);color:var(--tinta3);font-size:.78rem}

/* ── Muestra de web ───────────────────────────────────────────────────────
   Una sola tarjeta ancha en cada pagina de sector, con la muestra que le toca:
   la peluqueria ve la peluqueria. Es el mismo lenguaje que las fichas del
   portafolio de la portada (filete, papel, la foto que crece al pasar por
   encima); aqui va apaisada porque solo hay una y tiene que leerse de una
   pasada, no compararse con nada. */
.muestra{display:grid;grid-template-columns:minmax(0,42%) 1fr;align-items:stretch;
  border:1px solid var(--filete);border-radius:6px;overflow:hidden;background:var(--papel);
  text-decoration:none;color:inherit;transition:border-color .25s,transform .3s var(--e)}
.muestra:hover,.muestra:focus-visible{border-color:var(--carbon);transform:translateY(-3px)}
.muestra .foto{position:relative;min-height:210px;background:var(--beige);overflow:hidden}
.muestra .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s var(--e)}
.muestra:hover .foto img{transform:scale(1.04)}
.muestra .txt{padding:26px 28px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.muestra .etq{font-family:Montserrat,system-ui,sans-serif;font-weight:600;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dorado-ink)}
.muestra .n{font-family:Montserrat,system-ui,sans-serif;font-weight:600;font-size:1.24rem}
.muestra .d{color:var(--tinta2);font-size:.93rem;max-width:46ch}
.muestra .ir{font-family:Montserrat,system-ui,sans-serif;font-weight:600;font-size:.82rem;
  color:var(--dorado-ink);margin-top:4px}
@media(max-width:720px){
  .muestra{grid-template-columns:1fr}
  .muestra .foto{min-height:0;aspect-ratio:16/10}
  .muestra .txt{padding:22px}
}
@media (prefers-reduced-motion:reduce){
  .muestra,.muestra .foto img{transition:none}
  .muestra:hover{transform:none}
  .muestra:hover .foto img{transform:none}
}

/* ── EL REVELADO AL HACER SCROLL ──────────────────────────────────────────
   Los mismos números que la portada —cortinilla de 800 ms, opacidad de 500 ms,
   la misma curva `--e`— para que el sitio se mueva igual de punta a punta. La
   clase la reparte /js/revelar.js; aquí solo está el aspecto.

   Nada se esconde si el guion no ha arrancado (`html.js-rev`): un fallo de red
   deja la página quieta, nunca en blanco. */
.js-rev .rev{clip-path:inset(0 0 100% 0);opacity:0;
  transition:clip-path .8s var(--e),opacity .5s var(--e)}
.js-rev .rev.visto{clip-path:inset(0 0 0 0);opacity:1}
@media (prefers-reduced-motion:reduce){
  .js-rev .rev,.js-rev .rev.visto{clip-path:none;opacity:1;transition:none}
}
@media print{
  .js-rev .rev{clip-path:none!important;opacity:1!important}
}