/* ————————————————————————————————————————————————————————————————
   WebHosteleros · rediseño «Mesa + Producto»
   Dirección C (cálida, editorial, artesana) cruzada con la D
   (enseñar el producto en vez de contarlo).
   Hoja aparte de styles.css para poder comparar las dos versiones.
   ———————————————————————————————————————————————————————————————— */

:root{
  --mantel:#F7F1E6;
  --paper:#FFFDF9;
  --hueso:#EFE7D8;
  --espresso:#241F1D;
  --tinta:#3A322E;
  --humo:#7A6E64;
  --linea:#E2D7C4;
  --pimenton:#C4402F;
  --pimenton-osc:#A5321F;
  --ambar:#E3A13E;
  --hierba:#6E8B5A;

  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Jost', system-ui, -apple-system, sans-serif;

  --r:14px;
  --r-lg:22px;
  --sombra:0 24px 60px rgba(36,31,29,.13);
  --sombra-alta:0 34px 80px rgba(36,31,29,.2);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--mantel);
  color:var(--espresso);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,figure{margin:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--pimenton);color:var(--mantel)}
:focus-visible{outline:2.5px solid var(--pimenton);outline-offset:3px;border-radius:4px}

.container{width:min(1180px,100% - 44px);margin-inline:auto}
.container--narrow{width:min(760px,100% - 44px)}

/* ————— tipografía ————— */
.display{font-family:var(--serif);font-weight:700;letter-spacing:-.025em;line-height:1.02;text-wrap:balance}
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--pimenton)}
.lead{color:var(--humo);font-size:1.08rem;max-width:56ch}
em.acento{font-style:italic;color:var(--pimenton)}

/* ————— botones ————— */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-weight:500;font-size:.95rem;padding:14px 28px;border-radius:99px;border:1.5px solid transparent;cursor:pointer;transition:transform .22s cubic-bezier(.16,1,.3,1),background .22s,border-color .22s,color .22s}
.btn:hover{transform:translateY(-2px) scale(1.02)}
.btn:active{transform:translateY(0) scale(.99)}
.btn--primary{background:var(--pimenton);color:#fff}
.btn--primary:hover{background:var(--pimenton-osc)}
.btn--ghost{border-color:var(--espresso);color:var(--espresso)}
.btn--ghost:hover{background:var(--espresso);color:var(--mantel)}
.btn--light{border-color:rgba(247,241,230,.4);color:var(--mantel)}
.btn--light:hover{background:var(--mantel);color:var(--espresso)}
.btn--lg{padding:17px 34px;font-size:1rem}
.btn--sm{padding:10px 20px;font-size:.85rem}

/* ————— navegación ————— */
.nav{position:fixed;inset:0 0 auto;z-index:100;padding:18px 0;transition:background .3s,box-shadow .3s,padding .3s}
.nav.pegada{background:rgba(247,241,230,.9);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--linea);padding:11px 0}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px}
.marca{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:700;font-size:1.2rem;letter-spacing:-.02em}
.marca svg{flex:none}
.marca i{font-style:normal;color:var(--pimenton)}
.nav__links{display:flex;align-items:center;gap:30px;font-size:.92rem}
.nav__links a{position:relative;color:var(--tinta);transition:color .2s}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1.5px;background:var(--pimenton);transition:right .28s cubic-bezier(.16,1,.3,1)}
.nav__links a:hover{color:var(--pimenton)}
.nav__links a:hover::after{right:0}
.nav__tog{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:9px;cursor:pointer}
.nav__tog span{width:22px;height:2px;background:var(--espresso);border-radius:2px;transition:.25s}
.nav__tog[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__tog[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__tog[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:99;background:var(--espresso);color:var(--mantel);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 32px;font-family:var(--serif);font-size:2.1rem;font-weight:700}
.menu[hidden]{display:none!important}
.menu a{padding:10px 0;opacity:0;animation:menuIn .5s cubic-bezier(.16,1,.3,1) forwards}
.menu a:nth-child(1){animation-delay:.05s}.menu a:nth-child(2){animation-delay:.11s}
.menu a:nth-child(3){animation-delay:.17s}.menu a:nth-child(4){animation-delay:.23s}
.menu a:nth-child(5){animation-delay:.29s}
@keyframes menuIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* con el menú abierto, la cabecera va sobre fondo oscuro */
body.menu-abierto .nav{background:transparent;box-shadow:none;backdrop-filter:none}
body.menu-abierto .marca{color:var(--mantel)}
body.menu-abierto .marca i{color:#E8705C}
body.menu-abierto .nav__tog span{background:var(--mantel)}

/* ————— portada ————— */
.hero{position:relative;padding:150px 0 90px;overflow:hidden}
.hero__in{will-change:transform,opacity}
.hero__grano{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E")}
.hero__in{display:grid;grid-template-columns:1fr 1.02fr;gap:60px;align-items:center;position:relative;z-index:2}
.hero h1{font-size:clamp(3rem,7.4vw,6rem)}
.hero .lead{margin-top:26px;font-size:1.16rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:38px}
.hero__micro{margin-top:26px;font-size:.87rem;color:var(--humo);display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.hero__micro b{color:var(--espresso);font-weight:600}

/* línea que se revela palabra a palabra */
.revelar{display:block;overflow:hidden}
.revelar > span{display:block;transform:translateY(106%);animation:subir .95s cubic-bezier(.16,1,.3,1) forwards}
.revelar:nth-of-type(2) > span{animation-delay:.09s}
.revelar:nth-of-type(3) > span{animation-delay:.18s}
@keyframes subir{to{transform:none}}

/* ————— escena: tus webs reales, girando en un marco ————— */
.escena{position:relative;perspective:1400px}
.escena__marco{
  position:relative;border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 40px 90px rgba(36,31,29,.28);
  transform:rotateY(calc(var(--mx,0)*-7deg)) rotateX(calc(var(--my,0)*7deg));
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
  animation:flotar 7s ease-in-out infinite, entrarEscena 1.1s .25s cubic-bezier(.16,1,.3,1) both;
}
@keyframes flotar{0%,100%{translate:0 0}50%{translate:0 -13px}}
@keyframes entrarEscena{from{opacity:0;transform:translateY(40px) scale(.94)}to{opacity:1}}
.escena__pila{position:relative;aspect-ratio:1440/900;background:var(--hueso)}
.escena__pila img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  opacity:0;transform:scale(1.05);
  transition:opacity .9s ease, transform 4.6s ease-out;
}
.escena__pila img.activa{opacity:1;transform:scale(1)}
.escena__barra{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--hueso);border-bottom:1px solid var(--linea);position:relative;z-index:3}
.escena__pie{margin-top:20px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:.88rem;color:var(--humo)}
.escena__pie b{color:var(--espresso);font-weight:600;font-family:var(--serif);font-size:1.02rem}
.escena__puntos{display:flex;gap:6px;margin-left:6px}
.escena__puntos button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--linea);cursor:pointer;transition:.3s}
.escena__puntos button[aria-current="true"]{background:var(--pimenton);width:20px;border-radius:99px}

/* ————— barra de progreso de lectura ————— */
.progreso{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--pimenton),var(--ambar));z-index:110;pointer-events:none}

/* ————— revelado palabra a palabra ————— */
.pal{display:inline-block;overflow:hidden;vertical-align:bottom}
.pal > span{display:inline-block;transform:translateY(105%);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.visible .pal > span,.pal.visible > span{transform:none}

/* ————— contadores ————— */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:64px;border-top:1px solid var(--linea);padding-top:38px}
.cifra b{display:block;font-family:var(--serif);font-size:clamp(2.1rem,4.2vw,3.1rem);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.cifra span{display:block;margin-top:9px;font-size:.84rem;color:var(--humo);letter-spacing:.02em}

/* ————— revelado de los marcos con cortinilla ————— */
.marco{clip-path:inset(0 0 0 0 round 12px)}
.trabajo__marco .marco{clip-path:inset(0 100% 0 0 round 12px);transition:clip-path 1.1s cubic-bezier(.76,0,.24,1)}
.trabajo__marco.visible .marco{clip-path:inset(0 0 0 0 round 12px)}
.trabajo__marco img{transition:transform 1.4s cubic-bezier(.16,1,.3,1);transform:scale(1.12)}
.trabajo__marco.visible img{transform:scale(1)}

/* ————— cinta ————— */
.cinta{background:var(--espresso);color:var(--mantel);padding:21px 0;overflow:hidden;white-space:nowrap}
.cinta__pista{display:inline-flex;animation:correr 26s linear infinite}
.cinta__pista span{font-family:var(--serif);font-size:1.5rem;font-weight:600;padding-right:30px;display:inline-flex;align-items:center;gap:30px}
.cinta__pista span::after{content:"✳";color:var(--ambar);font-size:.85rem}
@keyframes correr{to{transform:translateX(-50%)}}
.cinta:hover .cinta__pista{animation-play-state:paused}

/* ————— secciones ————— */
.sec{padding:104px 0}
.sec--papel{background:var(--paper)}
.sec--tinta{background:var(--espresso);color:var(--mantel)}
.sec--tinta .lead{color:rgba(247,241,230,.66)}
.sec--tinta .eyebrow{color:var(--ambar)}
.sec__cab{max-width:62ch;margin-bottom:52px}
.sec__cab h2{font-size:clamp(2.1rem,4.6vw,3.4rem);margin-top:14px}
.sec__cab .lead{margin-top:18px}

/* ————— trabajos (la prueba) ————— */
.trabajos{display:grid;gap:30px}
.trabajo{display:grid;grid-template-columns:1fr 1.32fr;gap:44px;align-items:center}
.trabajo:nth-child(even) .trabajo__marco{order:-1}
.trabajo__txt h3{font-family:var(--serif);font-size:1.9rem;font-weight:700;letter-spacing:-.02em}
.trabajo__zona{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--humo);margin-bottom:9px}
.trabajo__txt p{color:var(--humo);margin-top:12px;font-size:.99rem}
.trabajo__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.tag{font-size:.74rem;letter-spacing:.05em;background:var(--hueso);color:var(--tinta);padding:5px 12px;border-radius:99px}
.sec--tinta .tag{background:rgba(247,241,230,.11);color:rgba(247,241,230,.8)}
.trabajo__link{display:inline-flex;align-items:center;gap:7px;margin-top:20px;font-weight:500;color:var(--pimenton);font-size:.93rem}
.trabajo__link svg{transition:transform .25s}
.trabajo__link:hover svg{transform:translateX(4px)}

/* marco de navegador */
.marco{border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--sombra);transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s}
.marco:hover{transform:translateY(-8px) scale(1.012);box-shadow:var(--sombra-alta)}
.marco__barra{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--hueso);border-bottom:1px solid var(--linea)}
.marco__punto{width:9px;height:9px;border-radius:50%;background:#CFC3AD}
.marco__url{flex:1;text-align:center;font-size:.72rem;color:var(--humo);letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.marco img{width:100%;height:auto;aspect-ratio:1440/900;object-fit:cover;object-position:top center}

/* ————— carta viva (la parte «producto») ————— */
.viva{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.viva__demo{position:relative;display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center}

.tel{width:214px;flex:none;background:var(--espresso);border-radius:30px;padding:9px;box-shadow:var(--sombra-alta)}
.tel__pant{background:var(--paper);border-radius:23px;padding:20px 15px;height:454px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.tel__cab{text-align:center;padding-bottom:11px;border-bottom:1px solid var(--linea)}
.tel__cab b{font-family:var(--serif);font-size:1.02rem;font-weight:700;display:block}
.tel__cab i{font-style:normal;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--humo)}
.fila{display:flex;justify-content:space-between;align-items:baseline;gap:9px;font-size:.81rem;color:var(--tinta)}
.fila span{min-width:0}
.fila--viva{background:rgba(196,64,47,.07);margin-inline:-7px;padding:6px 7px;border-radius:7px}
.fila b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
/* QR de verdad: SVG generado con el enlace real, no un patrón decorativo.
   29 módulos + 2 de zona tranquila; a 104px salen ~2,8px por módulo, que es
   lo que necesita un móvil para leerlo de la pantalla. */
.tel__qr{margin-top:auto;align-self:center;flex:none;width:104px;height:104px;aspect-ratio:1;border-radius:3px;display:block}
.tel__pie{text-align:center;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--humo)}

.espejos{display:grid;gap:15px}
.espejo{background:var(--paper);border:1px solid var(--linea);border-radius:var(--r);padding:15px 17px;box-shadow:0 8px 24px rgba(36,31,29,.06)}
.espejo__et{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--humo);display:flex;align-items:center;gap:7px;margin-bottom:9px}
.espejo__et::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hierba)}
.espejo .fila{font-size:.86rem}
.espejo__g{display:flex;align-items:center;gap:11px}
.espejo__g div{flex:1;min-width:0}
.espejo__g b{font-size:.92rem;display:block;font-family:var(--serif)}
.espejo__g small{color:var(--humo);font-size:.76rem}

.pulso{animation:pulso .95s cubic-bezier(.16,1,.3,1)}
@keyframes pulso{
  0%{background-color:rgba(227,161,62,.5)}
  100%{background-color:transparent}
}
.viva__mando{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:13px;background:var(--hueso);border-radius:var(--r);padding:15px 18px}
.viva__mando p{font-size:.9rem;color:var(--humo);flex:1;min-width:190px}
.viva__nota{margin-top:15px;font-size:.84rem;color:var(--humo)}

/* ————— servicios ————— */
.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--r-lg);overflow:hidden}
.celda{background:var(--paper);padding:34px 30px;transition:background .3s,transform .7s cubic-bezier(.16,1,.3,1),opacity .7s;opacity:0;transform:translateY(22px)}
.rejilla.visible .celda{opacity:1;transform:none}
.celda:hover{background:var(--mantel)}
.celda__n{font-family:var(--serif);font-size:.85rem;color:var(--pimenton);font-weight:600}
.celda h3{font-family:var(--serif);font-size:1.35rem;font-weight:700;margin-top:14px;letter-spacing:-.015em}
.celda p{color:var(--humo);font-size:.94rem;margin-top:9px}

/* ————— planes ————— */
.grupo{font-family:var(--serif);font-weight:600;font-size:1.12rem;margin-bottom:18px;display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.grupo span{font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--humo);background:var(--hueso);border-radius:99px;padding:4px 13px}
.planes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.planes--2{grid-template-columns:repeat(2,1fr);max-width:780px}
.plan{background:var(--paper);border:1px solid var(--linea);border-radius:var(--r-lg);padding:30px 26px;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.plan:hover{transform:translateY(-6px);box-shadow:var(--sombra)}
.plan--dest{border:2px solid var(--pimenton);position:relative;box-shadow:var(--sombra)}
.plan--dest::before{content:"El más elegido";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--pimenton);color:#fff;font-size:.7rem;font-weight:600;padding:4px 14px;border-radius:99px;white-space:nowrap}
.plan--punteado{border-style:dashed;background:transparent}
.plan h3{font-family:var(--serif);font-size:1.3rem;font-weight:700}
.plan__p{font-family:var(--serif);font-weight:700;font-size:2.1rem;margin:8px 0 16px;line-height:1;font-variant-numeric:tabular-nums}
.plan__p small{display:block;font-family:var(--sans);font-size:.72rem;font-weight:500;color:var(--humo);letter-spacing:.04em;margin-bottom:3px}
.plan__p em{font-style:normal;font-family:var(--sans);font-size:.95rem;font-weight:500;color:var(--humo)}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.plan li{font-size:.92rem;color:var(--humo);padding-left:22px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:8px;width:13px;height:13px;border-radius:50%;background:rgba(110,139,90,.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%236E8B5A' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat}
.plan li b{color:var(--espresso);font-weight:600}
.plan__pie{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;background:var(--paper);border:1px solid var(--linea);border-radius:var(--r);padding:20px 24px}

/* ————— comandea ————— */
.pronto{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:center}
.pronto__nota{font-size:.88rem;color:rgba(247,241,230,.55);border-top:1px solid rgba(247,241,230,.15);padding-top:15px;margin-top:22px}

/* ————— cierre ————— */
.cierre{background:var(--pimenton);color:#fff;padding:96px 0;text-align:center}
.cierre h2{font-size:clamp(2.2rem,5.4vw,3.8rem)}
.cierre p{margin:20px auto 0;max-width:46ch;color:rgba(255,255,255,.86)}
.cierre__btn{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:36px}
.cierre .btn--ghost{border-color:rgba(255,255,255,.55);color:#fff}
.cierre .btn--ghost:hover{background:#fff;color:var(--pimenton)}
.cierre .btn--primary{background:#fff;color:var(--pimenton)}

.pie{background:var(--espresso);color:var(--mantel);padding:62px 0 30px}
.pie__rej{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:34px}
.pie__rej p{color:rgba(247,241,230,.6);font-size:.93rem;margin-top:14px;max-width:32ch}
.pie h4{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ambar);margin-bottom:15px}
.pie__col a{display:block;color:rgba(247,241,230,.72);font-size:.93rem;padding:5px 0;transition:color .2s}
.pie__col a:hover{color:#fff}
.pie__fin{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);text-align:center;color:rgba(247,241,230,.5);font-size:.86rem}

/* ————— aparición al hacer scroll ————— */
.sube{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)}
.sube.visible{opacity:1;transform:none}
.sube[data-retardo="1"]{transition-delay:.09s}
.sube[data-retardo="2"]{transition-delay:.18s}
.sube[data-retardo="3"]{transition-delay:.27s}

/* ————— responsive ————— */
@media(max-width:980px){
  .hero__in,.viva,.pronto{grid-template-columns:1fr;gap:44px}
  .escena__marco{transform:none}
  .trabajo{grid-template-columns:1fr;gap:26px}
  .trabajo:nth-child(even) .trabajo__marco{order:0}
  .rejilla{grid-template-columns:repeat(2,1fr)}
  .planes{grid-template-columns:repeat(2,1fr)}
  .pie__rej{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){.cifras{grid-template-columns:repeat(2,1fr);gap:30px}}
@media(max-width:700px){
  .nav__links{display:none}
  .nav__tog{display:flex}
  .hero{padding:118px 0 66px}
  .sec{padding:74px 0}
  .rejilla,.planes,.planes--2{grid-template-columns:1fr}
  .viva__demo{grid-template-columns:1fr;justify-items:center}
  .espejos{width:100%}
  .pie__rej{grid-template-columns:1fr 1fr;gap:26px}
  .cinta__pista span{font-size:1.2rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .sube{opacity:1;transform:none}
  .revelar > span{transform:none}
}

.plan li.sinCheck{padding-left:0}
.plan li.sinCheck::before{content:none}

.rejilla.visible .celda:nth-child(1){transition-delay:0.00s}
.rejilla.visible .celda:nth-child(2){transition-delay:0.07s}
.rejilla.visible .celda:nth-child(3){transition-delay:0.14s}
.rejilla.visible .celda:nth-child(4){transition-delay:0.21s}
.rejilla.visible .celda:nth-child(5){transition-delay:0.28s}
.rejilla.visible .celda:nth-child(6){transition-delay:0.35s}
@media (prefers-reduced-motion:reduce){.escena__marco{animation:none;transform:none}.trabajo__marco .marco{clip-path:none}.trabajo__marco img{transform:none}.celda{opacity:1;transform:none}.pal > span{transform:none}}

/* ————— portada de páginas interiores ————— */
.hero--int{padding:142px 0 70px}
.hero__in--int{display:block;max-width:820px}
.hero--int h1{font-size:clamp(2.5rem,6vw,4.4rem);margin-top:18px}
.hero--int .lead{margin-top:22px;font-size:1.12rem}
.hero--int .hero__cta{margin-top:32px}

/* ————— FAQ ————— */
.faq{display:grid;gap:11px}
.faq__it{background:var(--paper);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;transition:border-color .25s}
.faq__it[open]{border-color:var(--pimenton)}
.faq__it summary{cursor:pointer;list-style:none;padding:19px 24px;font-weight:500;font-size:1.02rem;display:flex;justify-content:space-between;align-items:center;gap:18px}
.faq__it summary::-webkit-details-marker{display:none}
.faq__it summary::after{content:"";flex:none;width:11px;height:11px;border-right:2px solid var(--pimenton);border-bottom:2px solid var(--pimenton);transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s}
.faq__it[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq__r{padding:0 24px 20px;color:var(--humo);font-size:.98rem}

/* ————— bloques de contenido de las páginas interiores ————— */
.bloques{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.bloque{background:var(--paper);border:1px solid var(--linea);border-radius:var(--r-lg);padding:28px 26px}
.bloque h3{font-family:var(--serif);font-size:1.28rem;font-weight:700;letter-spacing:-.015em}
.bloque p{color:var(--humo);font-size:.96rem;margin-top:9px}
.bloque .plan__p{margin:10px 0 6px;font-size:1.8rem}

/* ————— enlaces de zonas ————— */
.zonas{display:flex;flex-wrap:wrap;gap:10px}
.zonas a{background:var(--paper);border:1px solid var(--linea);border-radius:99px;padding:10px 20px;font-size:.92rem;transition:.25s}
.zonas a:hover{border-color:var(--pimenton);color:var(--pimenton);transform:translateY(-2px)}

/* ————— texto legal ————— */
.prosa{max-width:70ch}
.prosa h2{font-family:var(--serif);font-size:1.55rem;font-weight:700;margin-top:46px;letter-spacing:-.02em}
.prosa h3{font-family:var(--serif);font-size:1.18rem;font-weight:700;margin-top:30px}
.prosa p,.prosa li{color:var(--tinta);margin-top:14px;font-size:1rem}
.prosa ul{padding-left:20px}
.prosa a{color:var(--pimenton);text-decoration:underline;text-underline-offset:3px}
.prosa table{width:100%;border-collapse:collapse;margin-top:20px;font-size:.93rem}
.prosa th,.prosa td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--linea)}
.prosa th{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--humo)}
.tabla-scroll{overflow-x:auto}

@media(max-width:700px){
  .bloques{grid-template-columns:1fr}
  .hero--int{padding:116px 0 54px}
}


/* ————————————————————————————————————————————————————————————————
   Móvil: el carrusel tiene que ser barato.
   En el teléfono el marco ocupa todo el ancho, así que flotar una
   caja con sombra de 90px y escalar un JPEG de 1280 en cada cambio
   produce tirones. Aquí se queda solo el fundido, que es gratis.
   ———————————————————————————————————————————————————————————————— */
@media(max-width:860px){
  .escena{perspective:none}
  .escena__marco{
    animation:entrarEscena .8s .1s cubic-bezier(.16,1,.3,1) both;
    transform:none;
    box-shadow:0 16px 36px rgba(36,31,29,.2);
  }
  .escena__pila img{
    transition:opacity .45s linear;
    transform:none;
    will-change:opacity;
  }
  .escena__pila img.activa{transform:none}
  .escena__pie{margin-top:16px;flex-wrap:wrap}
  .hero__in{gap:40px}
  /* el grano cuesta repintado y en pantalla pequeña casi no se nota */
  .hero__grano{display:none}
}

/* Cuatro planes en fila (línea de redes y packs) */
.planes--4{grid-template-columns:repeat(4,1fr);gap:14px}
.planes--4 .plan{padding:26px 20px}
.planes--4 .plan h3{font-size:1.16rem}
.planes--4 .plan__p{font-size:1.8rem}
.planes--4 .plan li{font-size:.87rem}
@media(max-width:1100px){.planes--4{grid-template-columns:repeat(2,1fr);gap:18px}.planes--4 .plan{padding:30px 26px}}
@media(max-width:700px){.planes--4{grid-template-columns:1fr}}