/* ===========================================================================
   HILVÁN · Atelier de costura — hoja de estilos única
   Loseta de estilo: artesanal · preciso · cálido · sereno · contemporáneo
   Todo el movimiento respeta `prefers-reduced-motion`.
   =========================================================================== */

@import url('fuentes.css?v=20260814204724');

/* --- 1. Fichas de diseño ------------------------------------------------- */
:root{
  /* Color */
  --tinta:      #191512;
  --tinta-80:   rgba(25,21,18,.80);
  --tinta-2:    #2C251F;
  --lino:       #F7F2EA;
  --lino-2:     #EFE7DA;
  --lino-3:     #E3D8C7;
  --terracota:  #A6462B;
  --terracota-o:#7E3320;
  --oro:        #B5842A;
  --salvia:     #55684F;
  --gris:       #766C61;
  --gris-claro: #A79C8E;
  --blanco:     #FFFDFA;

  /* Tipografía */
  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --texto:   'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Escala */
  --t-xs: .78rem;  --t-sm: .92rem;  --t-base: 1.05rem; --t-lg: 1.2rem;
  --t-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --t-2xl: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --t-3xl: clamp(2.6rem, 1.8rem + 3.6vw, 4.6rem);
  --t-4xl: clamp(2.7rem, 1.9rem + 4.6vw, 5.4rem);

  /* Ritmo */
  --ancho: 1200px;
  --ancho-estrecho: 760px;
  --r-sec: clamp(4rem, 3rem + 5vw, 8rem);
  --radio: 2px;
  --radio-g: 4px;

  /* Sombra y movimiento */
  --sombra: 0 1px 2px rgba(25,21,18,.04), 0 8px 30px rgba(25,21,18,.07);
  --sombra-alta: 0 2px 6px rgba(25,21,18,.06), 0 24px 60px rgba(25,21,18,.14);
  --curva: cubic-bezier(.22,.61,.36,1);
  --curva-suave: cubic-bezier(.4,0,.2,1);
}

/* --- 2. Base ------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--lino); color:var(--tinta);
  font-family:var(--texto); font-size:var(--t-base); font-weight:400;
  line-height:1.65; letter-spacing:.006em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:400; line-height:1.1; margin:0 0 .5em; letter-spacing:-.015em; }
h1{ font-size:var(--t-3xl); } h2{ font-size:var(--t-2xl); } h3{ font-size:var(--t-xl); } h4{ font-size:var(--t-lg); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
::selection{ background:var(--terracota); color:var(--blanco); }
:focus-visible{ outline:2px solid var(--terracota); outline-offset:3px; border-radius:var(--radio); }

.contenedor{ width:min(100% - 2.5rem, var(--ancho)); margin-inline:auto; }
.estrecho{ max-width:var(--ancho-estrecho); }
.seccion{ padding-block:var(--r-sec); position:relative; }
.saltar{ position:absolute; left:-9999px; top:0; background:var(--tinta); color:var(--lino); padding:.8rem 1.2rem; z-index:200; }
.saltar:focus{ left:1rem; top:1rem; }

/* --- 3. Piezas tipográficas --------------------------------------------- */
.antetitulo{
  font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.22em;
  font-weight:500; color:var(--terracota); margin:0 0 1.1rem;
  display:flex; align-items:center; gap:.75rem;
}
.antetitulo::before{ content:''; width:2.2rem; height:1px; background:currentColor; flex:none; }
.antetitulo.centro{ justify-content:center; }
.entradilla{ font-size:var(--t-lg); color:var(--gris); max-width:58ch; }
.cursiva{ font-family:var(--display); font-style:italic; }
.destacado{ color:var(--terracota); }
.numeral{ font-family:var(--display); font-size:var(--t-2xl); color:var(--terracota); line-height:1; }
.mini{ font-size:var(--t-sm); color:var(--gris); }
.cifra{ font-variant-numeric:tabular-nums; }

/* --- 4. Botones ---------------------------------------------------------- */
.btn{
  --bg:var(--terracota); --fg:var(--blanco); --bd:var(--terracota);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.9rem; border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  font-size:var(--t-sm); font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  border-radius:var(--radio); cursor:pointer; position:relative; overflow:hidden; white-space:nowrap;
  transition:transform .35s var(--curva), box-shadow .35s var(--curva), background .3s, color .3s, border-color .3s;
  will-change:transform;
}
.btn::after{
  content:''; position:absolute; inset:0; background:var(--tinta);
  transform:translateY(101%); transition:transform .45s var(--curva); z-index:0;
}
.btn > *{ position:relative; z-index:1; }
.btn:hover::after{ transform:translateY(0); }
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(25,21,18,.18); }
.btn:active{ transform:translateY(0); }
.btn-linea{ --bg:transparent; --fg:var(--tinta); --bd:var(--tinta); }
.btn-linea:hover{ color:var(--lino); }
.btn-claro{ --bg:transparent; --fg:var(--lino); --bd:rgba(247,242,234,.45); }
.btn-claro::after{ background:var(--lino); }
.btn-claro:hover{ color:var(--tinta); }
.btn-peq{ padding:.6rem 1.2rem; font-size:var(--t-xs); }
.btn[disabled]{ opacity:.45; pointer-events:none; }

.enlace-sub{
  display:inline-flex; align-items:center; gap:.5rem; font-size:var(--t-sm);
  font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  padding-bottom:.25rem; background-image:linear-gradient(var(--terracota),var(--terracota));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .4s var(--curva), color .3s;
}
.enlace-sub:hover{ background-size:100% 1px; color:var(--terracota); }
.enlace-sub .flecha{ transition:transform .35s var(--curva); }
.enlace-sub:hover .flecha{ transform:translateX(5px); }

/* --- 5. Barra de navegación --------------------------------------------- */
/* La barra flota sobre una portada oscura en las seis páginas: en ese estado
   el texto va en claro. Al compactarse gana fondo lino y vuelve a tinta.     */
.barra{
  position:fixed; inset:0 0 auto; z-index:100; color:var(--lino);
  padding-block:1.35rem;
  transition:padding .4s var(--curva), color .4s, background .4s, box-shadow .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.barra .marca-bajada{ color:rgba(247,242,234,.62); }
.barra:not(.compacta) .nav a[aria-current="page"]{ color:#E0B27C; }
.barra:not(.compacta) .nav a::after{ background:#E0B27C; }
.barra:not(.compacta) .hamburguesa{ border-color:rgba(247,242,234,.38); }
.barra.compacta{ color:var(--tinta); }
.barra.compacta .marca-bajada{ color:var(--gris); }
.barra::before{
  content:''; position:absolute; inset:0; background:var(--lino);
  opacity:0; transition:opacity .4s var(--curva); z-index:-1;
}
.barra.compacta{ padding-block:.7rem; border-bottom-color:var(--lino-3); box-shadow:0 4px 24px rgba(25,21,18,.06); }
.barra.compacta::before{ opacity:.97; }
.barra-int{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

.marca{ display:flex; align-items:center; gap:.7rem; flex:none; }
.marca-icono{ width:34px; height:34px; flex:none; transition:transform .5s var(--curva); }
.marca:hover .marca-icono{ transform:rotate(-12deg); }
.marca-txt{ display:flex; flex-direction:column; line-height:1; }
.marca-nombre{ font-family:var(--display); font-size:1.42rem; letter-spacing:.02em; }
.marca-bajada{ font-size:.6rem; text-transform:uppercase; letter-spacing:.3em; color:var(--gris); margin-top:.28rem; }

.nav{ display:flex; align-items:center; gap:.35rem; }
.nav a{
  padding:.55rem .85rem; font-size:.83rem; text-transform:uppercase; letter-spacing:.12em;
  font-weight:400; position:relative; transition:color .3s;
}
.nav a::after{
  content:''; position:absolute; left:.85rem; right:.85rem; bottom:.3rem; height:1px;
  background:var(--terracota); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--curva);
}
.nav a:hover::after, .nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--terracota); }
.barra-acciones{ display:flex; align-items:center; gap:.9rem; }
.tel-barra{ font-size:var(--t-sm); letter-spacing:.04em; display:flex; align-items:center; gap:.45rem; }
.tel-barra:hover{ color:var(--terracota); }

.hamburguesa{
  display:none; width:44px; height:44px; border:1px solid var(--lino-3); background:transparent;
  border-radius:var(--radio); cursor:pointer; padding:0; place-items:center;
}
.hamburguesa span{ display:block; width:20px; height:1.5px; background:currentColor; margin:4px auto; transition:transform .4s var(--curva), opacity .3s; }
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

.menu-movil{
  position:fixed; inset:0; background:var(--lino); color:var(--tinta); z-index:99;
  display:flex; flex-direction:column; justify-content:center; padding:6rem 2rem 2rem;
  clip-path:inset(0 0 100% 0); transition:clip-path .6s var(--curva); visibility:hidden;
}
.menu-movil.abierto{ clip-path:inset(0 0 0 0); visibility:visible; }
.menu-movil a{
  font-family:var(--display); font-size:clamp(1.9rem,8vw,2.8rem); padding:.35rem 0;
  border-bottom:1px solid var(--lino-3); opacity:0; transform:translateY(18px);
  transition:opacity .5s var(--curva), transform .5s var(--curva), color .3s;
}
.menu-movil.abierto a{ opacity:1; transform:none; }
.menu-movil a:hover{ color:var(--terracota); }
.menu-movil-pie{ margin-top:2.2rem; display:flex; flex-direction:column; gap:.6rem; font-size:var(--t-sm); color:var(--gris); }

/* --- 6. Portada ---------------------------------------------------------- */
.hero{ position:relative; min-height:100svh; display:grid; align-items:end; overflow:hidden; color:var(--lino); }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; animation:kenburns 22s ease-in-out infinite alternate; }
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(25,21,18,.62) 0%, rgba(25,21,18,.34) 38%, rgba(25,21,18,.88) 100%);
}
@keyframes kenburns{ from{ transform:scale(1.02) translate3d(0,0,0);} to{ transform:scale(1.14) translate3d(-1.5%,-1.5%,0);} }
.hero-cont{ position:relative; z-index:2; padding-block:7rem 3.2rem; }
.hero h1{ font-size:var(--t-4xl); max-width:16ch; margin-bottom:.35em; }
.hero h1 .linea{ display:block; overflow:hidden; }
.hero h1 .linea > span{ display:block; transform:translateY(110%); animation:subir .95s var(--curva) forwards; }
.hero h1 .linea:nth-child(2) > span{ animation-delay:.12s; }
.hero h1 .linea:nth-child(3) > span{ animation-delay:.24s; }
@keyframes subir{ to{ transform:translateY(0); } }
.hero .entradilla{ color:rgba(247,242,234,.86); max-width:48ch; }
.hero-acciones{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.9rem; }
.hero-datos{
  display:flex; flex-wrap:wrap; gap:2.2rem; margin-top:2.4rem; padding-top:1.6rem;
  border-top:1px solid rgba(247,242,234,.22);
}
.hero-dato strong{ display:block; font-family:var(--display); font-size:1.9rem; line-height:1; }
.hero-dato > span{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.16em; color:rgba(247,242,234,.65); }
.hero-baja{
  position:absolute; left:50%; transform:translateX(-50%); bottom:1.6rem; z-index:3;
  display:grid; place-items:center; gap:.6rem;
  font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.2em; color:rgba(247,242,234,.7);
}
.hero-baja::after{ content:''; width:1px; height:52px; background:linear-gradient(rgba(247,242,234,.7),transparent); animation:baja 2.2s ease-in-out infinite; }
@keyframes baja{ 0%,100%{ transform:scaleY(.35); transform-origin:top;} 50%{ transform:scaleY(1); transform-origin:top;} }

/* Portada interior (páginas secundarias) */
.portadilla{ position:relative; padding-block:12rem 5rem; color:var(--lino); overflow:hidden; }
.portadilla .fondo{ position:absolute; inset:0; z-index:0; }
.portadilla .fondo img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); }
.portadilla .fondo::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(25,21,18,.72), rgba(25,21,18,.55)); }
.portadilla .contenedor{ position:relative; z-index:1; }
.portadilla h1{ max-width:18ch; margin-bottom:.3em; }
.portadilla .entradilla{ color:rgba(247,242,234,.85); }
.migas{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.16em; color:rgba(247,242,234,.6); margin-bottom:1.4rem; }
.migas a:hover{ color:var(--lino); }

/* --- 7. Cinta que corre --------------------------------------------------- */
.cinta{ background:var(--tinta); color:var(--lino); padding-block:1.05rem; overflow:hidden; }
.cinta-pista{ display:flex; gap:3rem; width:max-content; animation:correr 38s linear infinite; }
.cinta:hover .cinta-pista{ animation-play-state:paused; }
.cinta span{ font-size:var(--t-sm); text-transform:uppercase; letter-spacing:.24em; display:flex; align-items:center; gap:3rem; white-space:nowrap; }
.cinta span::after{ content:'✦'; color:var(--terracota); font-size:.7rem; }
@keyframes correr{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* --- 8. Revelado al hacer scroll ----------------------------------------
   ⚠️ El estado oculto vive detrás de `html.animar`, que solo pone el propio
   JavaScript. Sin JS —o si el observador nunca dispara— el contenido se ve.
   Un texto invisible para siempre es peor que un texto sin animación.        */
.animar [data-revelar]{ opacity:0; transform:translateY(26px); transition:opacity .85s var(--curva), transform .85s var(--curva); }
.animar [data-revelar="izq"]{ transform:translateX(-32px); }
.animar [data-revelar="der"]{ transform:translateX(32px); }
.animar [data-revelar="zoom"]{ transform:scale(.94); }
.animar [data-revelar].visible{ opacity:1; transform:none; }
.animar .escalonado > *{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--curva), transform .8s var(--curva); }
.animar .escalonado.visible > *{ opacity:1; transform:none; }
.escalonado.visible > *:nth-child(1){ transition-delay:.05s }
.escalonado.visible > *:nth-child(2){ transition-delay:.14s }
.escalonado.visible > *:nth-child(3){ transition-delay:.23s }
.escalonado.visible > *:nth-child(4){ transition-delay:.32s }
.escalonado.visible > *:nth-child(5){ transition-delay:.41s }
.escalonado.visible > *:nth-child(6){ transition-delay:.5s }
.animar .proceso-hilo::after{ transform:scaleX(0); }
.animar .proceso.visible .proceso-hilo::after{ transform:scaleX(1); }
.animar .hito::after{ transform:scale(0); }
.animar .hito.visible::after{ transform:scale(1); }

/* --- 9. Retículas y tarjetas -------------------------------------------- */
.rejilla{ display:grid; gap:1.6rem; }
.r-2{ grid-template-columns:repeat(2,1fr); }
.r-3{ grid-template-columns:repeat(3,1fr); }
.r-4{ grid-template-columns:repeat(4,1fr); }
.dos-col{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.dos-col.desigual{ grid-template-columns:1.05fr .95fr; }
.cabecera-sec{ max-width:64ch; margin-bottom:3.2rem; }
.cabecera-sec.centro{ margin-inline:auto; text-align:center; }

.tarjeta{
  background:var(--blanco); border:1px solid var(--lino-3); border-radius:var(--radio-g);
  padding:2rem 1.8rem; position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .5s var(--curva), box-shadow .5s var(--curva), border-color .5s;
}
.tarjeta::before{
  content:''; position:absolute; left:0; top:0; width:100%; height:2px;
  background:var(--terracota); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--curva);
}
.tarjeta:hover{ transform:translateY(-6px); box-shadow:var(--sombra-alta); border-color:var(--lino-2); }
.tarjeta:hover::before{ transform:scaleX(1); }
.tarjeta h3{ margin-bottom:.4rem; }
.tarjeta .icono{ width:42px; height:42px; margin-bottom:1.2rem; color:var(--terracota); }
.tarjeta .desde{ margin-top:auto; padding-top:1.1rem; border-top:1px dashed var(--lino-3); font-size:var(--t-sm); display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.tarjeta .desde b{ font-family:var(--display); font-size:1.35rem; font-weight:500; }

.marco{ position:relative; border-radius:var(--radio-g); overflow:hidden; }
.marco img{ width:100%; transition:transform 1.1s var(--curva); }
.marco:hover img{ transform:scale(1.05); }
.marco.alto img{ aspect-ratio:3/4; object-fit:cover; }
.marco.ancho img{ aspect-ratio:4/3; object-fit:cover; }
.marco.cuadro img{ aspect-ratio:1; object-fit:cover; }
.marco-nota{
  position:absolute; left:1.1rem; bottom:1.1rem; background:var(--lino);
  padding:.45rem .9rem; font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.14em;
}
.firma-foto{ font-size:var(--t-xs); color:var(--gris-claro); margin-top:.6rem; letter-spacing:.04em; }

/* Bloque con imagen desplazada */
.compuesto{ position:relative; }
.compuesto .principal{ width:88%; }
.compuesto .secundaria{
  position:absolute; right:0; bottom:-2.5rem; width:44%;
  border:8px solid var(--lino); border-radius:var(--radio-g); box-shadow:var(--sombra);
}
.sello{
  position:absolute; left:-1.5rem; top:-1.5rem; width:112px; height:112px;
  display:grid; place-items:center; background:var(--terracota); color:var(--lino);
  border-radius:50%; text-align:center; font-size:var(--t-xs); line-height:1.3;
  text-transform:uppercase; letter-spacing:.1em; box-shadow:var(--sombra);
  animation:gira 26s linear infinite;
}
.sello b{ font-family:var(--display); font-size:1.6rem; display:block; letter-spacing:0; }
@keyframes gira{ to{ transform:rotate(360deg); } }
.sello.fijo{ animation:none; }

/* --- 10. Proceso con hilo ------------------------------------------------ */
.proceso{ position:relative; display:grid; gap:2.2rem; }
.proceso-hilo{ position:absolute; left:0; right:0; top:34px; height:2px; overflow:hidden; }
.proceso-hilo::after{
  content:''; display:block; height:100%; width:100%;
  background:repeating-linear-gradient(90deg, var(--terracota) 0 12px, transparent 12px 22px);
  transform:scaleX(1); transform-origin:left; transition:transform 1.6s var(--curva);
}
.proceso.visible .proceso-hilo::after{ transform:scaleX(1); }
.paso{ text-align:center; position:relative; }
.paso-num{
  width:68px; height:68px; margin:0 auto 1.4rem; display:grid; place-items:center;
  border:1px solid var(--lino-3); border-radius:50%; background:var(--lino);
  font-family:var(--display); font-size:1.5rem; color:var(--terracota);
  transition:background .45s var(--curva), color .45s, border-color .45s, transform .45s var(--curva);
}
.paso:hover .paso-num{ background:var(--terracota); color:var(--lino); border-color:var(--terracota); transform:scale(1.07); }

/* --- 11. Precios --------------------------------------------------------- */
.tabla-precios{ width:100%; border-collapse:collapse; font-size:var(--t-sm); }
.tabla-precios caption{ text-align:left; font-family:var(--display); font-size:var(--t-lg); padding-bottom:1rem; }
.tabla-precios th{ text-align:left; font-weight:500; text-transform:uppercase; letter-spacing:.12em; font-size:var(--t-xs); color:var(--gris); padding:.9rem 1rem; border-bottom:1px solid var(--lino-3); }
.tabla-precios td{ padding:1rem; border-bottom:1px solid var(--lino-2); vertical-align:top; }
.tabla-precios tbody tr{ transition:background .3s; }
.tabla-precios tbody tr:hover{ background:var(--blanco); }
.tabla-precios .precio{ font-family:var(--display); font-size:1.15rem; white-space:nowrap; }
.tabla-precios .plazo{ color:var(--gris); white-space:nowrap; }
.tabla-envoltorio{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

.etiqueta{
  display:inline-block; padding:.22rem .6rem; font-size:.68rem; text-transform:uppercase;
  letter-spacing:.14em; border:1px solid currentColor; border-radius:999px; color:var(--salvia);
}
.etiqueta.oro{ color:var(--oro); }
.etiqueta.terr{ color:var(--terracota); }

/* --- 12. Testimonios ----------------------------------------------------- */
.carrusel{ position:relative; overflow:hidden; }
.carrusel-pista{ display:flex; transition:transform .7s var(--curva); }
.carrusel-item{ min-width:100%; padding:0 .5rem; }
.cita{ font-family:var(--display); font-size:clamp(1.3rem,.9rem + 1.5vw,2rem); line-height:1.4; font-style:italic; max-width:34ch; }
.cita-autor{ margin-top:1.8rem; display:flex; align-items:center; gap:1rem; }
.cita-autor img{ width:52px; height:52px; border-radius:50%; object-fit:cover; }
.cita-autor b{ display:block; font-weight:500; }
.carrusel-mandos{ display:flex; gap:.6rem; margin-top:2.4rem; }
.mando{
  width:46px; height:46px; border:1px solid var(--lino-3); background:transparent;
  border-radius:50%; cursor:pointer; display:grid; place-items:center;
  transition:background .3s, color .3s, border-color .3s, transform .3s var(--curva);
}
.mando:hover{ background:var(--tinta); color:var(--lino); border-color:var(--tinta); transform:scale(1.06); }
.puntos{ display:flex; gap:.5rem; align-items:center; margin-left:auto; }
.punto{ width:7px; height:7px; border-radius:50%; background:var(--lino-3); border:0; padding:0; cursor:pointer; transition:width .4s var(--curva), background .3s; }
.punto[aria-selected="true"]{ width:24px; border-radius:4px; background:var(--terracota); }
.estrellas{ color:var(--oro); letter-spacing:.15em; font-size:var(--t-sm); }

/* Respuesta del taller a una reseña */
.respuesta{
  margin-top:1rem; padding:1rem 1.2rem; background:var(--lino-2);
  border-left:2px solid var(--terracota); font-size:var(--t-sm); border-radius:0 var(--radio) var(--radio) 0;
}
.respuesta b{ font-weight:500; }

/* --- 13. Galería y visor ------------------------------------------------- */
.filtros{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.5rem; }
.filtro{
  padding:.55rem 1.15rem; border:1px solid var(--lino-3); background:transparent;
  font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.12em; cursor:pointer;
  border-radius:999px; transition:background .3s, color .3s, border-color .3s, transform .3s var(--curva);
}
.filtro:hover{ transform:translateY(-2px); border-color:var(--tinta); }
.filtro[aria-pressed="true"]{ background:var(--tinta); color:var(--lino); border-color:var(--tinta); }
.galeria{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.pieza{
  position:relative; cursor:pointer; overflow:hidden; border-radius:var(--radio-g); background:var(--lino-2);
  transition:opacity .45s var(--curva), transform .45s var(--curva);
}
.pieza img{ width:100%; aspect-ratio:3/4; object-fit:cover; transition:transform 1s var(--curva), filter .6s; }
.pieza:hover img{ transform:scale(1.06); }
.pieza-info{
  position:absolute; inset:auto 0 0; padding:1.6rem 1.3rem 1.2rem; color:var(--lino);
  background:linear-gradient(transparent, rgba(25,21,18,.9)); transform:translateY(12px); opacity:0;
  transition:transform .45s var(--curva), opacity .45s var(--curva);
}
.pieza:hover .pieza-info, .pieza:focus-visible .pieza-info{ transform:none; opacity:1; }
.pieza-info h4{ margin:0 0 .15rem; font-size:1.15rem; }
.pieza-info span{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.14em; color:rgba(247,242,234,.75); }
.pieza.oculta{ display:none; }
.pieza.grande{ grid-column:span 2; }
.pieza.grande img{ aspect-ratio:3/2.1; }

.visor{
  position:fixed; inset:0; z-index:150; background:rgba(20,17,14,.94);
  display:grid; place-items:center; padding:clamp(1rem,4vw,3rem);
  opacity:0; visibility:hidden; transition:opacity .4s var(--curva), visibility .4s;
}
.visor.abierto{ opacity:1; visibility:visible; }
.visor figure{ margin:0; max-width:min(1000px,100%); text-align:center; transform:scale(.96); transition:transform .5s var(--curva); }
.visor.abierto figure{ transform:none; }
.visor img{ max-height:74svh; width:auto; margin-inline:auto; border-radius:var(--radio-g); }
.visor figcaption{ color:var(--lino); margin-top:1.2rem; }
.visor figcaption b{ font-family:var(--display); font-size:1.3rem; font-weight:500; display:block; }
.visor figcaption span{ font-size:var(--t-sm); color:rgba(247,242,234,.65); }
.visor-cerrar{ position:absolute; top:1.4rem; right:1.4rem; width:48px; height:48px; border:1px solid rgba(247,242,234,.3); background:transparent; color:var(--lino); border-radius:50%; cursor:pointer; transition:background .3s,transform .3s; }
.visor-cerrar:hover{ background:rgba(247,242,234,.14); transform:rotate(90deg); }
.visor-nav{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border:1px solid rgba(247,242,234,.3); background:transparent; color:var(--lino); border-radius:50%; cursor:pointer; transition:background .3s; display:grid; place-items:center; }
.visor-nav:hover{ background:rgba(247,242,234,.14); }
.visor-nav.ant{ left:1.2rem; } .visor-nav.sig{ right:1.2rem; }

/* --- 14. Acordeón -------------------------------------------------------- */
.acordeon{ border-top:1px solid var(--lino-3); }
.item-ac{ border-bottom:1px solid var(--lino-3); }
.item-ac summary,
.item-ac .disparador{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:1.5rem 3rem 1.5rem 0; position:relative; font-family:var(--display);
  font-size:var(--t-lg); line-height:1.35; list-style:none; transition:color .3s;
}
.item-ac .disparador:hover{ color:var(--terracota); }
.item-ac .disparador::after{
  content:''; position:absolute; right:.6rem; top:50%; width:13px; height:13px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg); transition:transform .4s var(--curva);
}
.item-ac.abierto .disparador::after{ transform:translateY(-25%) rotate(-135deg); }
.item-ac .cuerpo{ overflow:hidden; height:0; transition:height .45s var(--curva); }
.item-ac .cuerpo-int{ padding:0 3rem 1.7rem 0; color:var(--gris); }
.item-ac.abierto .disparador{ color:var(--terracota); }

/* --- 15. Formularios ----------------------------------------------------- */
.formulario{ display:grid; gap:1.2rem; }
.campo{ display:grid; gap:.45rem; }
.campo label{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.14em; color:var(--gris); }
.campo input, .campo select, .campo textarea{
  width:100%; padding:.9rem 1rem; background:var(--blanco); border:1px solid var(--lino-3);
  border-radius:var(--radio); transition:border-color .3s, box-shadow .3s, background .3s;
}
.campo textarea{ min-height:130px; resize:vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; border-color:var(--terracota); box-shadow:0 0 0 3px rgba(166,70,43,.12);
}
.campo.error input, .campo.error select, .campo.error textarea{ border-color:#B23A34; }
.campo .aviso{ font-size:var(--t-xs); color:#B23A34; display:none; }
.campo.error .aviso{ display:block; }
.campo-doble{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.opciones{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.7rem; }
.opcion{ position:relative; }
.opcion input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.opcion span{
  display:block; padding:.9rem 1rem; border:1px solid var(--lino-3); background:var(--blanco);
  border-radius:var(--radio); font-size:var(--t-sm); cursor:pointer; text-align:center;
  transition:border-color .3s, background .3s, color .3s, transform .3s var(--curva);
}
.opcion input:checked + span{ border-color:var(--terracota); background:var(--terracota); color:var(--blanco); }
.opcion input:focus-visible + span{ outline:2px solid var(--terracota); outline-offset:2px; }
.opcion span:hover{ transform:translateY(-2px); }

/* Formulario por pasos */
.progreso{ display:flex; align-items:center; gap:.8rem; margin-bottom:2.2rem; }
.progreso-paso{ display:flex; align-items:center; gap:.55rem; font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.12em; color:var(--gris-claro); transition:color .4s; }
.progreso-paso b{
  width:30px; height:30px; display:grid; place-items:center; border:1px solid currentColor;
  border-radius:50%; font-weight:400; font-size:.8rem; transition:background .4s, color .4s, border-color .4s;
}
.progreso-paso.activo{ color:var(--terracota); }
.progreso-paso.hecho{ color:var(--salvia); }
.progreso-paso.hecho b{ background:var(--salvia); color:var(--lino); border-color:var(--salvia); }
.progreso-linea{ flex:1; height:1px; background:var(--lino-3); }
.paso-form{ display:none; animation:entra .5s var(--curva); }
.paso-form.activo{ display:grid; gap:1.2rem; }
@keyframes entra{ from{ opacity:0; transform:translateX(14px);} to{ opacity:1; transform:none;} }
.acciones-form{ display:flex; gap:.8rem; justify-content:space-between; margin-top:.6rem; flex-wrap:wrap; }

.resumen{ background:var(--lino-2); padding:1.5rem; border-radius:var(--radio-g); font-size:var(--t-sm); }
.resumen dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.6rem 1.2rem; }
.resumen dt{ color:var(--gris); }
.resumen dd{ margin:0; text-align:right; font-weight:500; }
.resumen .total{ border-top:1px dashed var(--lino-3); margin-top:.9rem; padding-top:.9rem; }

/* --- 16. Cotizador ------------------------------------------------------- */
.cotizador{ background:var(--blanco); border:1px solid var(--lino-3); border-radius:var(--radio-g); padding:clamp(1.6rem,3vw,2.6rem); }
.cotizador-salida{
  margin-top:1.6rem; padding:1.5rem; background:var(--tinta); color:var(--lino);
  border-radius:var(--radio-g); display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
}
.cotizador-salida .valor{ font-family:var(--display); font-size:clamp(1.8rem,1.2rem + 2vw,2.6rem); line-height:1; }
.cotizador-salida .valor.parpadea{ animation:pulso .5s var(--curva); }
@keyframes pulso{ 0%{ transform:scale(1);} 45%{ transform:scale(1.06); color:var(--oro);} 100%{ transform:scale(1);} }

/* --- 17. Franja de llamada ---------------------------------------------- */
.franja{ position:relative; overflow:hidden; color:var(--lino); text-align:center; }
.franja .fondo{ position:absolute; inset:0; }
.franja .fondo img{ width:100%; height:100%; object-fit:cover; }
.franja .fondo::after{ content:''; position:absolute; inset:0; background:rgba(25,21,18,.78); }
.franja .contenedor{ position:relative; z-index:1; }
.franja h2{ max-width:20ch; margin-inline:auto; }
.franja .entradilla{ color:rgba(247,242,234,.82); margin-inline:auto; }

/* --- 18. Pie ------------------------------------------------------------- */
.pie{ background:var(--tinta); color:rgba(247,242,234,.72); padding-block:4.5rem 2rem; font-size:var(--t-sm); }
.pie a{ transition:color .3s; }
.pie a:hover{ color:var(--terracota); }
.pie-rejilla{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(247,242,234,.14); }
.pie h4{ color:var(--lino); font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.18em; font-family:var(--texto); font-weight:500; margin-bottom:1.2rem; }
.pie ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.pie .marca-nombre{ color:var(--lino); }
.pie-abajo{ padding-top:1.8rem; display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; font-size:var(--t-xs); color:rgba(247,242,234,.5); }
.pie-nota{ margin-top:1.2rem; font-size:var(--t-xs); color:rgba(247,242,234,.45); max-width:44ch; }
.redes{ display:flex; gap:.7rem; }
.redes a{
  width:40px; height:40px; border:1px solid rgba(247,242,234,.22); border-radius:50%;
  display:grid; place-items:center; transition:background .3s, transform .3s var(--curva), border-color .3s;
}
.redes a:hover{ background:var(--terracota); border-color:var(--terracota); color:var(--lino); transform:translateY(-3px); }

/* --- 19. Widgets flotantes ---------------------------------------------- */
.flotantes{ position:fixed; right:1.2rem; bottom:1.2rem; z-index:120; display:grid; gap:.7rem; justify-items:end; }
.burbuja{
  width:56px; height:56px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center;
  box-shadow:var(--sombra-alta); transition:transform .35s var(--curva), background .3s;
}
.burbuja:hover{ transform:scale(1.08) translateY(-2px); }
.burbuja.wa{ background:#25D366; color:#fff; }
.burbuja.chat{ background:var(--tinta); color:var(--lino); }
.burbuja .globo{
  position:absolute; right:70px; white-space:nowrap; background:var(--tinta); color:var(--lino);
  padding:.5rem .9rem; border-radius:var(--radio); font-size:var(--t-xs); opacity:0; pointer-events:none;
  transform:translateX(8px); transition:opacity .3s, transform .3s var(--curva);
}
.burbuja:hover .globo{ opacity:1; transform:none; }
.punto-vivo{ position:absolute; top:2px; right:2px; width:12px; height:12px; background:var(--terracota); border:2px solid var(--lino); border-radius:50%; }

.chat-panel{
  position:fixed; right:1.2rem; bottom:5.6rem; z-index:121; width:min(370px, calc(100vw - 2.4rem));
  background:var(--lino); border:1px solid var(--lino-3); border-radius:var(--radio-g);
  box-shadow:var(--sombra-alta); overflow:hidden; display:flex; flex-direction:column;
  transform-origin:bottom right; transform:scale(.9) translateY(12px); opacity:0; visibility:hidden;
  transition:transform .4s var(--curva), opacity .35s, visibility .35s;
}
.chat-panel.abierto{ transform:none; opacity:1; visibility:visible; }
.chat-cab{ background:var(--tinta); color:var(--lino); padding:1rem 1.2rem; display:flex; align-items:center; gap:.8rem; }
.chat-cab .avatar{ width:38px; height:38px; border-radius:50%; background:var(--terracota); display:grid; place-items:center; font-family:var(--display); flex:none; }
.chat-cab b{ display:block; font-weight:500; font-size:var(--t-sm); }
.chat-cab span{ font-size:var(--t-xs); color:rgba(247,242,234,.6); display:flex; align-items:center; gap:.35rem; }
.chat-cab span::before{ content:''; width:7px; height:7px; border-radius:50%; background:#4ED07C; }
.chat-cerrar{ margin-left:auto; background:none; border:0; color:inherit; cursor:pointer; font-size:1.4rem; line-height:1; opacity:.7; }
.chat-cerrar:hover{ opacity:1; }
.chat-cuerpo{ padding:1.1rem; display:grid; gap:.7rem; max-height:min(46svh,360px); overflow-y:auto; align-content:start; }
.msg{ padding:.7rem 1rem; border-radius:12px; font-size:var(--t-sm); max-width:88%; animation:msgEntra .4s var(--curva); }
@keyframes msgEntra{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.msg.bot{ background:var(--blanco); border:1px solid var(--lino-3); border-bottom-left-radius:3px; }
.msg.yo{ background:var(--terracota); color:var(--blanco); margin-left:auto; border-bottom-right-radius:3px; }
.msg.escribiendo{ display:flex; gap:4px; align-items:center; width:fit-content; }
.msg.escribiendo i{ width:6px; height:6px; border-radius:50%; background:var(--gris-claro); animation:tres 1.2s infinite; }
.msg.escribiendo i:nth-child(2){ animation-delay:.18s } .msg.escribiendo i:nth-child(3){ animation-delay:.36s }
@keyframes tres{ 0%,60%,100%{ transform:translateY(0); opacity:.4 } 30%{ transform:translateY(-4px); opacity:1 } }
.chat-opciones{ padding:.9rem 1.1rem 1.1rem; display:flex; flex-wrap:wrap; gap:.45rem; border-top:1px solid var(--lino-3); }
.chat-op{
  padding:.45rem .85rem; border:1px solid var(--lino-3); background:var(--blanco); border-radius:999px;
  font-size:var(--t-xs); cursor:pointer; transition:background .25s, color .25s, border-color .25s, transform .25s;
}
.chat-op:hover{ background:var(--tinta); color:var(--lino); border-color:var(--tinta); transform:translateY(-1px); }

/* --- 20. Avisos ---------------------------------------------------------- */
.avisos{ position:fixed; top:1.2rem; left:50%; transform:translateX(-50%); z-index:200; display:grid; gap:.6rem; width:min(420px, calc(100vw - 2rem)); }
.aviso-flotante{
  background:var(--tinta); color:var(--lino); padding:.95rem 1.2rem; border-radius:var(--radio-g);
  box-shadow:var(--sombra-alta); font-size:var(--t-sm); display:flex; gap:.8rem; align-items:flex-start;
  animation:avisoEntra .45s var(--curva);
}
.aviso-flotante.ok{ border-left:3px solid #4ED07C; }
.aviso-flotante.mal{ border-left:3px solid #E0574F; }
.aviso-flotante.saliendo{ animation:avisoSale .35s var(--curva) forwards; }
@keyframes avisoEntra{ from{ opacity:0; transform:translateY(-14px) scale(.97);} to{ opacity:1; transform:none;} }
@keyframes avisoSale{ to{ opacity:0; transform:translateY(-14px) scale(.97);} }

/* --- 21. Barra de compromisos (SLA) ------------------------------------- */
.compromisos{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--lino-3); border:1px solid var(--lino-3); border-radius:var(--radio-g); overflow:hidden; }
.compromiso{ background:var(--lino); padding:1.7rem 1.4rem; transition:background .4s; }
.compromiso:hover{ background:var(--blanco); }
.compromiso b{ display:block; font-family:var(--display); font-size:1.9rem; color:var(--terracota); line-height:1; margin-bottom:.4rem; }
.compromiso span{ font-size:var(--t-sm); color:var(--gris); }

/* --- 22. Utilidades ------------------------------------------------------ */
.fondo-oscuro{ background:var(--tinta); color:var(--lino); }
.fondo-oscuro .entradilla, .fondo-oscuro .mini{ color:rgba(247,242,234,.68); }
.fondo-oscuro .antetitulo{ color:var(--oro); }
.fondo-crema{ background:var(--lino-2); }
.fondo-blanco{ background:var(--blanco); }
.centro{ text-align:center; }
.oculto{ display:none !important; }
.solo-lectores{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.divisor-puntada{ height:1px; background:repeating-linear-gradient(90deg, var(--lino-3) 0 10px, transparent 10px 18px); margin-block:var(--r-sec) 0; }
.pila{ display:grid; gap:1.2rem; }
.fila{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.lista-marcas{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem; }
.lista-marcas li{ position:relative; padding-left:1.9rem; }
.lista-marcas li::before{
  content:''; position:absolute; left:0; top:.6em; width:11px; height:6px;
  border-left:1.5px solid var(--terracota); border-bottom:1.5px solid var(--terracota);
  transform:rotate(-45deg);
}
.barra-progreso{ height:3px; background:var(--lino-3); border-radius:3px; overflow:hidden; }
.barra-progreso i{ display:block; height:100%; background:var(--terracota); width:0; transition:width 1.4s var(--curva); }

/* Indicador de lectura en el borde superior */
.lectura{ position:fixed; top:0; left:0; height:2px; background:var(--terracota); z-index:130; width:0; transition:width .1s linear; }

/* --- 23. Adaptación a pantallas ----------------------------------------- */
@media (max-width: 1000px){
  .r-4{ grid-template-columns:repeat(2,1fr); }
  .compromisos{ grid-template-columns:repeat(2,1fr); }
  .pie-rejilla{ grid-template-columns:1fr 1fr; }
  .galeria{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 860px){
  .nav, .tel-barra{ display:none; }
  .hamburguesa{ display:grid; }
  .dos-col, .dos-col.desigual{ grid-template-columns:1fr; }
  .r-3{ grid-template-columns:1fr 1fr; }
  .proceso{ grid-template-columns:1fr !important; gap:1.6rem; }
  .proceso-hilo{ display:none; }
  .paso{ display:grid; grid-template-columns:68px 1fr; gap:1.2rem; text-align:left; align-items:start; }
  .paso-num{ margin:0; }
  .compuesto .principal{ width:100%; }
  .compuesto .secundaria{ position:static; width:100%; margin-top:1rem; border-width:0; }
  .sello{ display:none; }
  .hero-datos{ gap:1.6rem 2rem; }
}
@media (max-width: 620px){
  .barra .btn-peq{ padding:.55rem .85rem; letter-spacing:.06em; }
  .marca-icono{ width:28px; height:28px; }
  .marca-nombre{ font-size:1.25rem; }
  .r-2,.r-3,.r-4{ grid-template-columns:1fr; }
  .galeria{ grid-template-columns:1fr; }
  .pieza.grande{ grid-column:span 1; }
  .campo-doble{ grid-template-columns:1fr; }
  .compromisos{ grid-template-columns:1fr; }
  .pie-rejilla{ grid-template-columns:1fr; }
  .progreso-paso span{ display:none; }
  .hero-baja{ display:none; }
  .visor-nav{ width:42px; height:42px; }
}

/* --- 24. Menos movimiento ------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  [data-revelar], .escalonado > *{ opacity:1 !important; transform:none !important; }
  .hero h1 .linea > span{ transform:none; }
  .hero-media img{ animation:none; }
}

/* --- 24 bis. Piezas de páginas concretas -------------------------------- */

/* Avatar de iniciales — evita usar retratos de personas reales como clientes */
.ini{
  width:52px; height:52px; border-radius:50%; background:var(--lino-3); flex:none;
  display:grid; place-items:center; font-family:var(--display); font-size:1.05rem;
  color:var(--terracota); letter-spacing:.02em;
}
.cita-autor > span:last-child{ display:grid; }

/* Equipo */
.persona{ position:relative; }
.persona .marco img{ aspect-ratio:4/5; object-fit:cover; filter:grayscale(.25); transition:filter .6s, transform 1.1s var(--curva); }
.persona:hover .marco img{ filter:grayscale(0); }
.persona h3{ margin:1.1rem 0 .1rem; font-size:1.3rem; }
.persona .cargo{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.15em; color:var(--terracota); }
.persona p{ margin-top:.7rem; font-size:var(--t-sm); color:var(--gris); }
.persona .oficio{ font-size:var(--t-xs); color:var(--gris-claro); margin-top:.6rem; display:block; }

/* Línea de tiempo */
.linea-tiempo{ position:relative; display:grid; gap:2.6rem; padding-left:2.6rem; }
.linea-tiempo::before{ content:''; position:absolute; left:8px; top:.6rem; bottom:.6rem; width:1px; background:repeating-linear-gradient(180deg,var(--lino-3) 0 8px, transparent 8px 15px); }
.hito{ position:relative; }
.hito::before{ content:''; position:absolute; left:-2.6rem; top:.55rem; width:17px; height:17px; border-radius:50%; border:1px solid var(--lino-3); background:var(--lino); }
.hito::after{ content:''; position:absolute; left:calc(-2.6rem + 5px); top:calc(.55rem + 5px); width:7px; height:7px; border-radius:50%; background:var(--terracota); transform:scale(1); transition:transform .5s var(--curva); }
.hito.visible::after, [data-revelar].visible .hito::after{ transform:scale(1); }
.hito .anio{ font-family:var(--display); font-size:1.5rem; color:var(--terracota); display:block; line-height:1; margin-bottom:.35rem; }
.hito h4{ margin-bottom:.25rem; }

/* Paquetes / planes */
.plan{
  background:var(--blanco); border:1px solid var(--lino-3); border-radius:var(--radio-g);
  padding:2.2rem 1.9rem; display:flex; flex-direction:column; position:relative;
  transition:transform .5s var(--curva), box-shadow .5s var(--curva), border-color .4s;
}
.plan:hover{ transform:translateY(-6px); box-shadow:var(--sombra-alta); }
.plan.resaltado{ border-color:var(--terracota); box-shadow:var(--sombra); }
.plan.resaltado::after{
  content:'El más pedido'; position:absolute; top:-11px; left:1.9rem; background:var(--terracota);
  color:var(--blanco); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; padding:.25rem .7rem; border-radius:999px;
}
.plan .valor{ font-family:var(--display); font-size:2.1rem; line-height:1; margin:.6rem 0 .2rem; }
.plan ul{ list-style:none; padding:0; margin:1.6rem 0; display:grid; gap:.7rem; font-size:var(--t-sm); }
.plan ul li{ position:relative; padding-left:1.6rem; }
.plan ul li::before{ content:''; position:absolute; left:0; top:.55em; width:9px; height:5px; border-left:1.5px solid var(--salvia); border-bottom:1.5px solid var(--salvia); transform:rotate(-45deg); }
.plan .btn{ margin-top:auto; }

/* Cajas de aviso e información */
.caja-nota{
  background:var(--lino-2); border-left:2px solid var(--terracota); padding:1.4rem 1.6rem;
  border-radius:0 var(--radio-g) var(--radio-g) 0; font-size:var(--t-sm);
}
.caja-nota b{ font-weight:500; }
.caja-datos{ background:var(--blanco); border:1px solid var(--lino-3); border-radius:var(--radio-g); padding:1.8rem; }
.caja-datos + .caja-datos{ margin-top:1.2rem; }
.caja-datos h4{ margin-bottom:.9rem; }
.caja-datos dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.55rem 1.4rem; font-size:var(--t-sm); }
.caja-datos dt{ color:var(--gris); } .caja-datos dd{ margin:0; text-align:right; }

/* Horario */
.horario{ width:100%; border-collapse:collapse; font-size:var(--t-sm); }
.horario td{ padding:.55rem 0; border-bottom:1px dashed var(--lino-3); }
.horario td:last-child{ text-align:right; }
.horario tr.hoy td{ color:var(--terracota); font-weight:500; }

/* Mapa */
.mapa{ position:relative; border-radius:var(--radio-g); overflow:hidden; border:1px solid var(--lino-3); background:var(--lino-2); }
.mapa iframe{ display:block; width:100%; height:380px; border:0; filter:grayscale(.35) contrast(1.05); }
.mapa-pie{ padding:1rem 1.2rem; background:var(--blanco); display:flex; justify-content:space-between; gap:1rem; align-items:center; flex-wrap:wrap; font-size:var(--t-sm); }

/* Encuesta de satisfacción */
.nps{ background:var(--blanco); border:1px solid var(--lino-3); border-radius:var(--radio-g); padding:1.9rem; }
.nps-escala{ display:flex; flex-wrap:wrap; gap:.4rem; margin:1.2rem 0 .7rem; }
.nps-nota{
  width:42px; height:42px; border:1px solid var(--lino-3); background:transparent; border-radius:var(--radio);
  cursor:pointer; font-size:var(--t-sm); transition:background .25s, color .25s, border-color .25s, transform .25s var(--curva);
}
.nps-nota:hover{ background:var(--terracota); color:var(--blanco); border-color:var(--terracota); transform:translateY(-3px); }
.nps-extremos{ display:flex; justify-content:space-between; font-size:var(--t-xs); color:var(--gris-claro); }

/* Cita destacada */
.cita-grande{
  font-family:var(--display); font-style:italic; font-size:clamp(1.5rem,1rem + 2vw,2.4rem);
  line-height:1.35; max-width:26ch; margin:0; position:relative; padding-left:2.9rem;
}
.cita-grande::before{ content:'“'; position:absolute; left:0; top:.06em; font-size:2.6em; color:var(--lino-3); line-height:1; opacity:.85; }

/* Dato grande suelto */
.dato-grande{ text-align:center; }
.dato-grande b{ display:block; font-family:var(--display); font-size:clamp(2.4rem,1.6rem + 3vw,3.6rem); line-height:1; color:var(--terracota); }
.dato-grande span{ font-size:var(--t-sm); color:var(--gris); }

/* Estado del pedido */
.estado-salida{ margin-top:1.4rem; padding:1.5rem; background:var(--lino-2); border-radius:var(--radio-g); }
.estado-salida h4{ margin-bottom:.2rem; }

/* Antes / después */
.comparativa{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.comparativa figure{ margin:0; }
.comparativa figcaption{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.14em; color:var(--gris); margin-top:.6rem; }

@media (max-width: 620px){
  .comparativa{ grid-template-columns:1fr; }
  .linea-tiempo{ padding-left:2rem; }
  .hito::before{ left:-2rem; } .hito::after{ left:calc(-2rem + 5px); }
}

/* --- 25. Impresión ------------------------------------------------------- */
@media print{
  .barra,.flotantes,.chat-panel,.hero-baja,.avisos,.lectura{ display:none !important; }
  body{ background:#fff; }
  .hero, .portadilla{ min-height:auto; color:#000; }
}