/* ============================================================
   CARLOS FABIÁN
   ------------------------------------------------------------
   Dos idiomas en una sola página, a propósito:

     LA SALA     · serif + oro   → las obras, lo que se vende
     LA CONSOLA  · mono + aqua   → lo que está vivo y lo que es gratis

   El negro es la habitación donde caben los dos.
   Para cambiar colores, cámbialos SOLO aquí abajo.
   ============================================================ */

:root{
  color-scheme: dark;

  /* La habitación */
  --noche:      #0A0908;
  --noche-alto: #100E0C;
  --noche-hondo:#050404;
  --linea:      #241F1A;
  --linea-viva: #3A322A;

  /* La tinta */
  --lino:       #F3EEE4;
  --lino-medio: #C4B9A8;
  --lino-tenue: #9A8F7F;

  /* El valor */
  --oro:        #D8A94C;
  --oro-claro:  #F8E6B0;
  --oro-hondo:  #9E6E24;
  --oro-metal:  linear-gradient(118deg, #F8E6B0 0%, #D8A94C 42%, #F3DCA0 60%, #9E6E24 100%);
  --oro-tinta:  #171004;

  /* La consola */
  --aqua:       #33DDBB;
  --aqua-medio: #1E8F79;
  --aqua-hondo: #0C2A25;

  --wa:         #25D366;
  --wa-tinta:   #05170B;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --puno:  "Style Script", "Segoe Script", cursive;

  --curva: cubic-bezier(.16,.84,.28,1);
  --muelle: cubic-bezier(.34,1.42,.5,1);   /* el rebote corto de los botones */
  --ancho: 1240px;
}

*{ box-sizing: border-box }

html{
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body{
  margin: 0;
  background: var(--noche);
  color: var(--lino);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a{ color: inherit; text-decoration: none }
h1,h2,h3,p,ul{ margin: 0 }
ul{ padding: 0; list-style: none }
img{ display: block; max-width: 100% }
button,a{ -webkit-tap-highlight-color: transparent }

:focus-visible{
  outline: 2px solid var(--aqua);
  outline-offset: 4px;
  border-radius: 2px;
}

::selection{ background: var(--oro); color: var(--oro-tinta) }

.sprite{ position: absolute; width: 0; height: 0; overflow: hidden }

.ico{
  width: 1.1em;
  height: 1.1em;
  flex: none;
  vertical-align: -.18em;
}

.caja{
  width: min(var(--ancho), calc(100% - 96px));
  margin-inline: auto;
}

.saltar{
  position: fixed;
  top: -140px; left: 18px;
  z-index: 60;
  padding: 13px 22px;
  border-radius: 100px;
  background: var(--aqua);
  color: var(--noche);
  font-weight: 700;
}
.saltar:focus{ top: 16px }

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */

.rotulo{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  font-weight: 500;
  color: var(--lino-tenue);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}
.rotulo--aqua{ color: var(--aqua) }
.rotulo .ico{ width: 16px; height: 16px }

.titulo-tramo{
  font-family: var(--serif);
  font-variation-settings: "opsz" 144;
  font-weight: 300;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin-top: 22px;
}
.titulo-tramo em{
  font-style: italic;
  background: var(--oro-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.titulo-tramo .apagado{ color: var(--lino-tenue) }
.titulo-centro{ text-align: center }

.bajada{
  margin-top: 26px;
  max-width: 56ch;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--lino-tenue);
}
.bajada-centro{ margin-inline: auto; text-align: center }

h3{
  font-family: var(--serif);
  font-variation-settings: "opsz" 60;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.16;
  letter-spacing: -.02em;
}

/* --- El movimiento elegido: cada línea sube a su turno --- */
.linea{
  display: block;
  overflow: hidden;
  padding-bottom: .08em;
}
.linea > span{
  display: block;
  transform: translateY(112%);
  opacity: 0;
  filter: blur(9px);
  transition:
    transform 1.15s var(--curva),
    opacity .85s ease,
    filter 1s ease;
}
.linea.visto > span{ transform: none; opacity: 1; filter: none }

/* --- Botones --- */
.boton{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 58px;
  padding: 16px 32px;
  border-radius: 100px;
  background: var(--oro-metal);
  color: var(--oro-tinta);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 1px 0 #FFEEC0 inset, 0 10px 30px #D8A94C1F;
  transition:
    transform .5s var(--muelle),
    box-shadow .45s var(--curva),
    filter .45s var(--curva);
}
.boton:hover{
  transform: scale(1.028);
  box-shadow: 0 1px 0 #FFEEC0 inset, 0 16px 42px #D8A94C33;
  filter: brightness(1.05);
}
.boton:active{ transform: scale(.968); transition-duration: .12s }
.boton-grande{ min-height: 64px; padding-inline: 40px; font-size: 16px }

.boton-fino{
  display: inline-flex;
  align-items: center;
  gap: 11px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 58px;
  padding: 16px 26px;
  border-radius: 100px;
  border: 1px solid var(--linea-viva);
  color: var(--lino);
  font-size: 15px;
  font-weight: 600;
  transition:
    transform .5s var(--muelle),
    border-color .4s var(--curva),
    color .4s var(--curva),
    background .4s var(--curva);
}
.boton-fino:hover{
  transform: scale(1.028);
  border-color: #D8A94C8C;
  color: var(--oro);
  background: #D8A94C12;
}
.boton-fino:active{ transform: scale(.968); transition-duration: .12s }

/* --- La onda: al tocar, el color se expande desde el dedo y se apaga.
   Como cuando algo cae al agua. --- */
.onda{
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: currentColor;
  opacity: .26;
  transform: scale(0);
  pointer-events: none;
  animation: onda .78s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes onda{
  to{ transform: scale(2.7); opacity: 0 }
}

/* --- El punto que respira: algo está vivo --- */
.pulso,
.estado{
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--aqua);
  flex: none;
  animation: respirar 2.4s ease-in-out infinite;
}
.estado--espera{ background: var(--oro); animation: none; opacity: .8 }
@keyframes respirar{
  0%,100%{ box-shadow: 0 0 0 0 #33DDBB55 }
  60%    { box-shadow: 0 0 0 8px #33DDBB00 }
}

/* ============================================================
   CABECERA
   ============================================================ */

.cabecera{
  position: sticky;
  top: 0;
  z-index: 50;
  isolation: isolate;
  border-bottom: 1px solid transparent;
  transition: background .45s var(--curva), border-color .45s var(--curva);
}
/* Sobre la portada no lleva fondo, pero si una sombra que la despega
   de la imagen: la barra se lee siempre, el cartel no se ensucia. */
.cabecera::before{
  content: "";
  position: absolute;
  inset: -1px 0 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, #0A0908C4 0%, #0A090870 48%, #0A090800 100%);
  transition: opacity .45s var(--curva);
}
.cabecera.posada{
  background: #0A0908F2;
  backdrop-filter: blur(20px) saturate(1.3);
  border-bottom-color: #D8A94C33;
}
.cabecera.posada::before{ opacity: 0 }
.cabecera-caja{
  width: min(var(--ancho), calc(100% - 96px));
  margin-inline: auto;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* --- La firma --- */
.firma{
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
/* --- El orbe: una esfera armilar de alambre, con las iniciales dentro.
   Cuatro aros girando en tres dimensiones. Ni una imagen, ni una libreria. --- */
.orbe{
  position: relative;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  flex: none;
  perspective: 190px;
}
/* La luz que hace que parezca una esfera y no un dibujo plano */
.orbe::before{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 27%, #F8E6B033, transparent 58%),
    radial-gradient(circle at 68% 76%, #9E6E2426, transparent 62%);
}
/* El contorno de la esfera */
.orbe::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid #D8A94C6E;
  /* El nucleo oscuro: los aros pasan por detras de las iniciales */
  background: radial-gradient(circle at 50% 50%, #0A0908F2 22%, #0A090800 52%);
  transition: border-color .5s var(--curva), box-shadow .5s var(--curva);
}

.orbe-giro{
  position: absolute;
  inset: 2px;
  transform-style: preserve-3d;
  animation: orbitar 19s linear infinite;
}
.aro{
  position: absolute;
  inset: 0;
  border: 1px solid #D8A94C;
  border-radius: 50%;
}
.aro-a       { transform: rotateY(  0deg); opacity: .62 }
.aro-b       { transform: rotateY( 58deg); opacity: .42 }
.aro-c       { transform: rotateY(-58deg); opacity: .42 }
.aro-ecuador { transform: rotateX( 76deg); opacity: .9; border-width: 1.5px; border-color: var(--oro-claro) }

@keyframes orbitar{ to{ transform: rotateY(360deg) } }

.orbe-cf{
  position: relative;
  z-index: 2;
  font-family: var(--serif);
  font-variation-settings: "opsz" 40;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1;
  letter-spacing: .01em;
  background: var(--oro-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* La casa, debajo de la firma. El aro que cruza el orbe por el medio
   es una latitud: la marca dibuja el nombre. */
.firma-casa{
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .26em;
  font-weight: 500;
  color: var(--lino-tenue);
  transition: color .35s var(--curva);
}
.firma:hover .firma-casa{ color: var(--oro) }

.firma:hover .orbe-giro{ animation-duration: 7s }
.firma:hover .orbe::after{
  border-color: var(--oro);
  box-shadow: 0 0 18px #D8A94C33, inset 0 0 12px #D8A94C1F;
}
.firma-texto{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.firma-nombre{
  display: block;
  font-family: var(--puno);
  font-size: 30px;
  line-height: 1;
  padding-top: 5px;
  background: var(--oro-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.firma:hover .firma-cifra{ border-color: var(--oro) }

.cabecera nav{
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 14px;
}
.cabecera nav > a{
  position: relative;
  padding-block: 6px;
  color: var(--lino);
  transition: color .25s;
}
.cabecera nav > a::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--curva);
}
.cabecera nav > a:hover{ color: var(--lino) }
.cabecera nav > a:hover::after{ transform: scaleX(1) }

.nav-cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 44px;
  padding: 11px 22px;
  border-radius: 100px;
  border: 1px solid #D8A94C4D;
  background: #D8A94C0F;
  color: var(--lino) !important;
  font-weight: 600;
  transition:
    transform .5s var(--muelle),
    border-color .4s var(--curva),
    background .4s var(--curva),
    color .4s var(--curva);
}
.nav-cta::after{ display: none }
.nav-cta:hover{
  transform: scale(1.035);
  border-color: var(--oro);
  background: #D8A94C1F;
  color: var(--oro-claro) !important;
}
.nav-cta:active{ transform: scale(.965); transition-duration: .12s }

/* ============================================================
   PORTADA · el cartel
   ============================================================ */

.portada{
  position: relative;
  min-height: 100svh;
  margin-top: -88px;
  display: flex;
  align-items: flex-end;
  padding: 150px 0 72px;
  overflow: hidden;
  isolation: isolate;
}

.fondo{ position: absolute; inset: 0; z-index: -1 }

.fondo-toma{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  opacity: 0;
  /* Todos estos sitios llevan su texto a la izquierda, justo donde va
     el titular. Se amplia hacia la derecha para enseñar su lado de
     imagen, y un desenfoque leve lo convierte en profundidad de campo. */
  --z:  1.45;          /* cuanto se amplia */
  --zx: 88%;           /* hacia donde: 88% = el lado de la imagen */
  --zy: 40%;
  transform-origin: var(--zx) var(--zy);
  transform: scale(var(--z));
  filter: blur(3px) saturate(.9);
  transition: opacity 1.7s ease;
}
.fondo-toma.activa{
  opacity: 1;
  animation: deriva 20s ease-out forwards;
}
/* La deriva parte del encuadre elegido, no de un valor fijo:
   asi el movil y el escritorio pueden encuadrar distinto. */
@keyframes deriva{
  from{ transform: scale(var(--z)) }
  to  { transform: scale(calc(var(--z) * 1.11)) }
}

.velo{
  position: absolute;
  inset: 0;
  background:
    /* techo: se traga la barra superior del sitio de fondo */
    linear-gradient(180deg, var(--noche) 0%, #0A0908E0 7%, #0A090866 20%, transparent 34%),
    /* pared izquierda: donde vive el texto, opaca de verdad */
    linear-gradient(92deg, var(--noche) 0%, var(--noche) 26%, #0A0908E8 44%, #0A0908A0 66%, #0A090855 100%),
    /* suelo */
    linear-gradient(0deg, var(--noche) 1%, #0A0908C8 20%, transparent 58%),
    radial-gradient(140% 96% at 70% 14%, transparent 30%, #0A090896 100%);
}

.portada-caja{
  position: relative;
  width: min(var(--ancho), calc(100% - 96px));
  margin-inline: auto;
}

.senal{
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--aqua);
  margin-bottom: 26px;
}

.titular{ margin: 0 0 4px }
.cifra{
  display: block;
  font-family: var(--serif);
  font-variation-settings: "opsz" 144;
  font-weight: 300;
  font-size: clamp(92px, 15.5vw, 216px);
  line-height: .88;
  letter-spacing: -.055em;
  color: var(--lino);
}
.resto{
  display: block;
  font-family: var(--serif);
  font-variation-settings: "opsz" 144;
  font-weight: 300;
  font-size: clamp(32px, 5.4vw, 70px);
  line-height: 1.06;
  letter-spacing: -.035em;
  margin-top: 6px;
}
.resto em{
  font-style: italic;
  color: var(--aqua);
}

.apoyo{
  margin-top: 26px;
  font-size: 17px;
  color: var(--lino-medio);
  max-width: 40ch;
}

.acciones{ margin-top: 34px; overflow: visible }
/* No suben tras una mascara como el texto: se acercan y se enfocan.
   Un boton que sale de debajo de una linea invisible se ve raro. */
.acciones > span{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  transform: translateY(26px) scale(.965);
  filter: blur(7px);
  transition:
    transform 1.05s var(--curva),
    opacity .8s ease,
    filter .9s ease;
}
.acciones.visto > span{ transform: none; filter: none }

.credito{
  position: absolute;
  right: max(48px, calc((100vw - var(--ancho)) / 2));
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
}
.credito-rotulo{ color: var(--lino-tenue) }
.credito-obra{
  color: var(--oro);
  border-bottom: 1px solid #D8A94C4D;
  padding-bottom: 2px;
  transition: opacity .5s;
}
.credito.cambiando .credito-obra{ opacity: 0 }

/* ============================================================
   LA CINTA
   ============================================================ */

.cinta{
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--linea);
  background: var(--noche-hondo);
  padding: 22px 0;
}
.cinta::before,
.cinta::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 140px;
  z-index: 2;
  pointer-events: none;
}
.cinta::before{ left: 0;  background: linear-gradient(90deg, var(--noche-hondo), transparent) }
.cinta::after { right: 0; background: linear-gradient(270deg, var(--noche-hondo), transparent) }

.cinta-pista{
  display: flex;
  gap: 22px;
  width: max-content;
  animation: correr 52s linear infinite;
}
@keyframes correr{ to{ transform: translateX(-50%) } }
.cinta:hover .cinta-pista,
.cinta:focus-within .cinta-pista{ animation-play-state: paused }

.cinta-obra{
  position: relative;
  width: 310px;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: 14px;
  transition: border-color .45s var(--curva), transform .45s var(--curva);
}
.cinta-obra img{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 0;
  filter: saturate(.82) brightness(.78);
  transition: filter .4s;
}
.cinta-obra span{
  display: block;
  padding: 11px 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--lino-tenue);
  border-top: 1px solid var(--linea);
}
.cinta-obra:hover{ border-color: var(--oro); transform: translateY(-4px) }
.cinta-obra:hover img{ filter: none }
.cinta-obra:hover span{ color: var(--oro) }

/* ============================================================
   TRAMOS
   ============================================================ */

.tramo{ padding-block: 128px }
.tramo .rotulo{ margin-bottom: 0 }

/* --- La sala --- */

.obras{
  display: flex;
  flex-direction: column;
  gap: 132px;
  margin-top: 96px;
  padding: 0;
}

.obra{
  display: grid;
  grid-template-columns: 1.14fr .86fr;
  align-items: center;
  gap: 64px;
}
.obra--invertida .lienzo{ order: 2 }

.lienzo{
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--linea-viva);
  border-radius: 18px;
  background: var(--noche-hondo);
  box-shadow: 0 30px 70px #00000090;
  transition: border-color .45s, transform .55s var(--curva), box-shadow .55s var(--curva);
}
.lienzo img{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 0;
  transition: transform 1.1s var(--curva), filter .55s;
  filter: saturate(.92);
}
.lienzo:hover{
  border-color: var(--oro);
  transform: translateY(-8px);
  box-shadow: 0 40px 90px #000000B0, 0 0 0 1px #D8A94C33;
}
.lienzo:hover img{ transform: scale(1.035); filter: none }

/* El barrido de luz al pasar por encima */
.brillo{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(102deg, transparent 38%, #F8E6B024 49%, transparent 61%);
  transform: translateX(-130%);
  transition: transform 1.1s var(--curva);
}
.lienzo:hover .brillo{ transform: translateX(130%) }

.ficha{ position: relative; min-width: 0 }
.ficha-num{
  position: absolute;
  top: -96px; left: -5px;
  font-family: var(--serif);
  font-variation-settings: "opsz" 144;
  font-weight: 300;
  font-size: 104px;
  line-height: 1;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1px #3A322A;
  pointer-events: none;
  user-select: none;
}
.ficha h3{ position: relative }
.ficha-tipo{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lino-tenue);
}
.ficha-tipo .ico{ width: 17px; height: 17px; color: var(--oro) }
.ficha-texto{
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--lino-medio);
  max-width: 46ch;
}
.ficha-ir{
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 48px;
  margin-top: 24px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--linea-viva);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--lino);
  transition: color .3s, border-color .3s, gap .3s var(--curva);
}
.ficha-ir .ico{ width: 16px; height: 16px }
.ficha-ir:hover{ color: var(--oro); border-color: var(--oro); gap: 17px }

/* --- Gratis · la consola --- */

.gratis{
  position: relative;
  background:
    radial-gradient(85% 60% at 12% 0%, #0C2A2540, transparent 70%),
    var(--noche-alto);
  border-block: 1px solid var(--linea);
}

.recursos{
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 26px;
  margin-top: 76px;
  align-items: stretch;
}

.recurso{
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linea-viva);
  border-radius: 20px;
  background: var(--noche);
  overflow: hidden;
}
.recurso-lienzo{ overflow: hidden; border-bottom: 1px solid var(--linea) }
.recurso-lienzo img{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 8.4;
  object-fit: cover;
  object-position: 50% 0;
}
.recurso-ficha{ padding: 32px 34px 34px }

.etiqueta{
  display: inline-block;
  padding: 5px 13px;
  border-radius: 100px;
  border: 1px solid #33DDBB59;
  background: #33DDBB12;
  color: var(--aqua);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
}
.etiqueta--tenue{
  border-color: var(--linea-viva);
  background: none;
  color: var(--lino-tenue);
}
.recurso-ficha h3{ margin-top: 20px }
.recurso-texto{
  margin-top: 16px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--lino-tenue);
}

.recurso-datos{
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--linea);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--lino-tenue);
}
.recurso-datos b{
  display: block;
  font-family: var(--serif);
  font-variation-settings: "opsz" 90;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--aqua);
  margin-bottom: 2px;
}

.recurso-ir{
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--lino-tenue);
}
.recurso--vacio{
  border-style: dashed;
  background: none;
  justify-content: center;
}

/* --- Qué hago --- */

.servicios{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 76px;
  overflow: hidden;
  border-radius: 22px;
  background: var(--linea);
  border: 1px solid var(--linea);
}
.servicio{
  position: relative;
  padding: 40px 34px 42px;
  background: var(--noche);
  transition: background .4s;
}
.servicio:hover{ background: var(--noche-alto) }
.servicio-ico{
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 15px;
  border: 1px solid #D8A94C4D;
  color: var(--oro);
}
.servicio-ico svg{ width: 24px; height: 24px }
.servicio-num{
  position: absolute;
  top: 42px; right: 32px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--lino-tenue);
}
.servicio h3{ margin-top: 28px; font-size: 24px }
.servicio p{
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--lino-tenue);
}

/* --- Cierre --- */

.cierre{
  position: relative;
  padding-block: 148px 132px;
  text-align: center;
  overflow: hidden;
  border-top: 1px solid var(--linea);
}
.cierre-luz{
  position: absolute;
  left: 50%; top: -220px;
  width: 720px; height: 420px;
  transform: translateX(-50%);
  background: var(--oro);
  filter: blur(150px);
  opacity: .17;
  pointer-events: none;
}
.cierre .rotulo{ justify-content: center }
.cierre .boton{ margin-top: 40px }
.cierre .ico{ width: 22px; height: 22px }
.letra-chica{
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .13em;
  color: var(--lino-tenue);
}

/* --- Pie --- */

footer{ border-top: 1px solid var(--linea); padding-block: 44px 40px }
.pie-caja{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
}
.firma-pie .orbe{ width: 40px; height: 40px }
.firma-pie .orbe-cf{ font-size: 11px }
.firma-pie .firma-nombre{ font-size: 25px }
.lema{
  font-family: var(--serif);
  font-variation-settings: "opsz" 40;
  font-style: italic;
  font-size: 15px;
  color: var(--lino-medio);
}
.pie-tiktok{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--lino-tenue);
  transition: color .25s;
}
.pie-tiktok:hover{ color: var(--oro) }
.pie-legal{
  width: 100%;
  padding-top: 26px;
  border-top: 1px solid var(--linea);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--lino-tenue);
}

/* --- Botón flotante de WhatsApp ---
   Verde de WhatsApp de verdad. Es el único sitio de toda la página
   donde el verde significa literalmente "escríbeme por WhatsApp". */
.wa-flotante{
  position: fixed;
  right: 28px; bottom: 28px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  background: var(--wa);
  color: var(--wa-tinta);
  box-shadow: 0 10px 30px #000000A0;
  opacity: 0;
  transform: translateY(18px) scale(.8);
  pointer-events: none;
  transition: transform .45s var(--curva), opacity .35s, box-shadow .3s;
}
.wa-flotante svg{ width: 29px; height: 29px }
.wa-flotante.visible{ opacity: 1; transform: none; pointer-events: auto }
.wa-flotante.visible:hover{ transform: scale(1.08); box-shadow: 0 14px 36px #000000B8, 0 0 0 9px #25D3661F }

/* --- Aparición de bloques al bajar --- */
.revelar{
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .95s var(--curva), transform .95s var(--curva);
}
.revelar.visto{ opacity: 1; transform: none }

/* ============================================================
   FUERA DE LA PANTALLA · la persona y lo que toma
   Deliberadamente mas pequeña que la sala: es un aparte,
   no un segundo portafolio.
   ============================================================ */

.vida{ padding-bottom: 92px }

.consumo{
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--linea);
}
.consumo-rotulo{ margin-bottom: 26px }

.frascos{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.frasco{
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px 20px 16px;
  border: 1px solid var(--linea);
  border-radius: 22px;
  background: linear-gradient(150deg, #14110D, #0B0A08 72%);
  transition: border-color .45s var(--curva), transform .45s var(--curva);
}
.frasco:hover{ border-color: #D8A94C4D; transform: translateY(-4px) }

/* La foto no lleva marco: su fondo ya es negro y se funde con la sala. */
.frasco-foto{
  position: relative;
  width: 158px;
  flex: none;
}
.frasco-foto::before{
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, #D8A94C2E, transparent 68%);
  filter: blur(14px);
}
.frasco-foto img{
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

.frasco-ficha{ min-width: 0 }

.frasco-tipo{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .17em;
  color: var(--oro);
}
.frasco h3{
  margin-top: 12px;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 500;
}
.frasco-texto{
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--lino-tenue);
}
.frasco-texto b{ color: var(--lino-medio); font-weight: 700 }

.frasco-boton{
  min-height: 46px;
  margin-top: 18px;
  padding: 12px 22px;
  font-size: 13.5px;
}

.consumo-nota{
  margin-top: 26px;
  max-width: 62ch;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--lino-tenue);
}

@media (max-width: 1080px){
  .frascos{ grid-template-columns: 1fr; gap: 16px }
  .frasco-foto{ width: 150px }
}

@media (max-width: 760px){
  .vida{ padding-bottom: 62px }
  .consumo{ margin-top: 42px; padding-top: 30px }
  .consumo-rotulo{ margin-bottom: 20px }
  .frasco{ gap: 14px; padding: 16px 18px 16px 10px; border-radius: 18px }
  .frasco-foto{ width: 116px }
  .frasco h3{ font-size: 17.5px; margin-top: 10px }
  .frasco-texto{ font-size: 13.5px; margin-top: 10px }
  .frasco-boton{ min-height: 44px; margin-top: 14px; padding: 11px 18px; font-size: 13px }
  .consumo-nota{ font-size: 12px; margin-top: 20px }
}

/* ============================================================
   PANTALLAS MEDIANAS
   ============================================================ */

@media (max-width: 1080px){
  .caja, .cabecera-caja, .portada-caja{ width: calc(100% - 56px) }
  .tramo{ padding-block: 96px }
  .obras{ gap: 96px; margin-top: 72px }
  .obra{ grid-template-columns: 1fr; gap: 30px }
  .obra--invertida .lienzo{ order: 0 }
  .ficha-num{ position: static; display: block; font-size: 64px; margin-bottom: 4px }
  .recursos{ grid-template-columns: 1fr }
  .servicios{ grid-template-columns: 1fr }
  .credito{ right: 28px }
}

/* ============================================================
   MÓVIL
   ============================================================ */

@media (max-width: 760px){
  .caja, .cabecera-caja, .portada-caja{ width: calc(100% - 34px) }
  html{ scroll-padding-top: 76px }

  .cabecera-caja{ height: 74px }
  .orbe{ width: 40px; height: 40px }
  .orbe-cf{ font-size: 11px }
  .firma-nombre{ font-size: 25px }
  .firma-casa{ font-size: 8px; letter-spacing: .2em }
  .lema{ width: 100%; order: 2; font-size: 14px }
  .cabecera nav{ gap: 0 }
  .cabecera nav > a:not(.nav-cta){ display: none }
  .nav-cta{ font-size: 12.5px; padding: 10px 16px }

  .portada{
    margin-top: -74px;
    /* Medido: con esto el boton entra entero en la primera pantalla
       de un movil de 375 x 812. Si lo tocas, vuelve a medirlo. */
    padding: 112px 0 52px;
    align-items: flex-end;
  }
  /* En vertical la luz baja de arriba, no de un lado */
  .fondo-toma{ --z: 1.95; --zx: 93%; --zy: 30% }
  .velo{
    background:
      linear-gradient(180deg, var(--noche) 0%, #0A0908C0 8%, transparent 26%),
      linear-gradient(0deg, var(--noche) 4%, var(--noche) 26%, #0A0908D8 48%, #0A090870 78%, #0A090844 100%),
      radial-gradient(150% 72% at 50% 0, transparent 18%, #0A0908B8 100%);
  }
  .senal{ font-size: 9.5px; letter-spacing: .16em; margin-bottom: 20px }
  .cifra{ font-size: clamp(76px, 26vw, 128px) }
  .resto{ font-size: clamp(28px, 8.6vw, 44px); margin-top: 4px }
  .apoyo{ margin-top: 19px; font-size: 15.5px }
  .acciones{ margin-top: 24px }
  .acciones > span{ gap: 12px; width: 100% }
  .boton{ min-height: 56px; padding-inline: 24px; font-size: 14.5px; flex: 1 1 auto }
  .boton-fino{ min-height: 56px; padding-inline: 18px; font-size: 14px; flex: 1 1 auto; justify-content: center }
  .credito{ right: 17px; bottom: 16px; font-size: 9.5px; gap: 8px }

  .cinta{ padding: 16px 0 }
  .cinta-pista{ gap: 14px; animation-duration: 38s }
  .cinta-obra{ width: 220px }
  .cinta-obra span{ font-size: 9.5px; padding: 9px 11px }
  .cinta::before, .cinta::after{ width: 56px }

  .tramo{ padding-block: 72px }
  .titulo-tramo{ font-size: clamp(30px, 8.4vw, 40px); margin-top: 18px }
  .bajada{ margin-top: 20px; font-size: 15.5px }
  .rotulo{ font-size: 10px; letter-spacing: .18em }

  .obras{ gap: 66px; margin-top: 52px }
  .obra{ gap: 22px }
  .ficha-num{ font-size: 50px }
  h3{ font-size: 25px }
  .ficha-texto{ font-size: 15px; margin-top: 16px }
  .ficha-ir{ font-size: 12px }

  .recursos{ margin-top: 48px; gap: 18px }
  .recurso-ficha{ padding: 26px 22px 28px }
  .recurso-datos{ gap: 22px; font-size: 10px }
  .recurso-datos b{ font-size: 25px }

  .servicios{ margin-top: 48px }
  .servicio{ padding: 30px 24px 32px }
  .servicio-num{ top: 32px; right: 24px }
  .servicio h3{ margin-top: 22px; font-size: 22px }

  .cierre{ padding-block: 92px 84px }
  .cierre .boton{ width: 100%; margin-top: 30px }
  .cierre-luz{ width: 420px; height: 260px; top: -140px }

  .pie-caja{ gap: 18px }
  .pie-legal{ padding-top: 20px; padding-bottom: 44px; font-size: 10px }

  .wa-flotante{ width: 54px; height: 54px; right: 16px; bottom: 16px }
}

/* ============================================================
   MOVIMIENTO REDUCIDO
   Si la persona pidió menos movimiento, la página se queda quieta
   y TODO sigue visible. Nada depende de una animación.
   ============================================================ */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto }
  *, *::before, *::after{
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .linea > span{ transform: none; opacity: 1 }
  .revelar{ opacity: 1; transform: none }
  .brillo{ display: none }
  .fondo-toma.activa{ animation: none; transform: scale(var(--z)) }
  .orbe-giro{ animation: none; transform: rotateY(-24deg) }
  .onda{ display: none }
  .acciones > span{ transform: none; filter: none }
  .cinta-pista{ animation: none }
  .cinta{ overflow-x: auto }
}