/* iguana70.com
   Paleta tomada del logotipo: la noche azul del fondo, el verde de la iguana,
   el lima de las escamas de la mejilla y el amarillo del ojo. */

:root {
  --noche:   #0a1a38;
  --noche-2: #132a55;
  --noche-3: #071330;
  --escama:  #2bd16b;
  --lima:    #b9ef3e;
  --ojo:     #f2e94e;
  --liquen:  #eef3ee;
  --blanco:  #fbfdfb;
  --tinta:   #0d1f33;
  --tinta-2: #45566c;
  --linea:   #cfd9d2;

  --display: "Anybody", "Arial Narrow", sans-serif;
  --texto:   "Atkinson Hyperlegible", "Segoe UI", sans-serif;

  --margen: clamp(1rem, 5vw, 4.5rem);
  --ancho:  76rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--liquen);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 750;
  line-height: 1.05;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
  text-wrap: balance;
}
h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); font-variation-settings: "wdth" 112; }
h3 { font-size: 1.3rem; font-variation-settings: "wdth" 100; }
p  { margin: 0 0 1em; max-width: 64ch; }

.saltar {
  position: absolute; left: -999px; top: .5rem; z-index: 50;
  background: var(--lima); color: var(--noche); padding: .5rem 1rem;
}
.saltar:focus { left: .5rem; }

/* ---------- barra ---------- */

.barra {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem var(--margen);
  color: var(--blanco);
}
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 1.25rem; font-variation-settings: "wdth" 118; }
.marca img { border-radius: 50%; }
.barra nav { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.75rem); font-size: .95rem; }
.barra nav a:not(.boton) { text-decoration: none; opacity: .85; }
.barra nav a:not(.boton):hover { opacity: 1; text-decoration: underline; }

@media (max-width: 760px) {
  .barra nav a:not(.boton) { display: none; }
}

/* ---------- botones ---------- */

.boton {
  display: inline-block;
  background: var(--escama); color: var(--noche);
  font-weight: 700; text-decoration: none;
  padding: .85rem 1.4rem; border-radius: 999px;
  transition: background .2s, transform .2s;
}
.boton:hover { background: var(--lima); transform: translateY(-1px); }
.boton--chico { padding: .5rem 1rem; font-size: .9rem; }
.boton--claro { background: var(--ojo); }
.boton--claro:hover { background: var(--blanco); }
.enlace-claro { color: var(--blanco); font-weight: 700; }

/* ---------- piel (canvas) ---------- */

.piel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- portada ---------- */

.portada {
  position: relative; overflow: hidden;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  background: var(--noche); color: var(--blanco);
  padding: 7rem var(--margen) clamp(3rem, 8vh, 6rem);
}
.portada::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, var(--noche) 0%, rgba(10,26,56,.88) 38%, rgba(10,26,56,.15) 75%, rgba(10,26,56,0) 100%);
}
.portada__texto { position: relative; z-index: 2; max-width: 72rem; pointer-events: none; }
.portada__texto a { pointer-events: auto; }

.portada h1 {
  font-size: min(7.2vw, 12.5vh, 7.5rem);
  font-weight: 850;
  line-height: .88;
  margin-bottom: .35em;
  text-wrap: initial;
}
.portada h1 span { display: block; }

.estira span {
  font-variation-settings: "wdth" var(--ancho-titulo, 118);
  animation: estirar 1.4s cubic-bezier(.2, .8, .2, 1) both;
}
.estira span:nth-child(2) { animation-delay: .12s; }
.estira span:nth-child(3) { animation-delay: .24s; }
.estira span:nth-child(4) { animation-delay: .36s; }
@keyframes estirar {
  from { font-variation-settings: "wdth" 50; opacity: 0; }
  35%  { opacity: 1; }
  to   { font-variation-settings: "wdth" var(--ancho-titulo, 118); opacity: 1; }
}

.portada__sub { font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 40ch; color: #d9e4f2; }
.portada__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 1.75rem; }
.portada__pista {
  position: absolute; z-index: 2; right: calc(var(--margen) + 6rem); bottom: 1.5rem; margin: 0;
  font-size: .85rem; color: rgba(255,255,255,.55); font-style: italic;
}
@media (hover: none) { .portada__pista { display: none; } }

@media (max-width: 760px) {
  .portada::before { background: linear-gradient(0deg, var(--noche) 0%, rgba(10,26,56,.9) 55%, rgba(10,26,56,.35) 100%); }
  .portada h1 { font-size: 11.5vw; --ancho-titulo: 100; }
}

/* ---------- servicios ---------- */

.servicios {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 5rem);
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(4rem, 10vw, 8rem) var(--margen);
}
.servicios__lado { position: sticky; top: 2rem; align-self: start; }
.servicios__lado p { color: var(--tinta-2); }

.servicios__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.servicios__lista li { border-bottom: 1px solid var(--linea); }
.servicios__lista a {
  display: grid; grid-template-columns: 1fr auto; column-gap: 1.5rem;
  padding: 1.6rem 0; text-decoration: none;
}
.servicios__lista h3, .servicios__lista h2 {
  grid-column: 1; margin: 0 0 .35rem;
  font-size: clamp(1.45rem, 2.8vw, 2.25rem); font-weight: 720;
  font-variation-settings: "wdth" 104;
  transition: font-variation-settings .45s cubic-bezier(.2, .8, .2, 1), color .2s;
}
.servicios__lista p { grid-column: 1; margin: 0; color: var(--tinta-2); }
.servicios__lista a::after {
  content: ""; grid-column: 2; grid-row: 1 / span 2; align-self: center;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 2px solid var(--tinta); transition: background .2s, border-color .2s, transform .3s;
}
.servicios__lista a:hover h3, .servicios__lista a:hover h2,
.servicios__lista a:focus-visible h3, .servicios__lista a:focus-visible h2 { font-variation-settings: "wdth" 130; color: #0f7a3d; }
.servicios__lista a:hover::after { background: var(--escama); border-color: var(--escama); transform: scale(1.35); }

.servicios__lista--ancha { max-width: var(--ancho); margin: 0 auto clamp(4rem, 8vw, 6rem); padding: 0 var(--margen); border: 0; }
.servicios__lista--ancha li:first-child { border-top: 1px solid var(--linea); }

@media (max-width: 860px) {
  .servicios { grid-template-columns: 1fr; }
  .servicios__lado { position: static; }
}

/* ---------- trabajos ---------- */

.trabajos { background: var(--blanco); padding: clamp(4rem, 10vw, 8rem) var(--margen); }
.trabajos > * { max-width: var(--ancho); margin-left: auto; margin-right: auto; }
.seccion__cabeza { margin-bottom: 3rem; }
.seccion__cabeza p { color: var(--tinta-2); }

.fichas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 2.75rem 2.5rem;
}
.ficha { border-top: 4px solid var(--escama); padding-top: 1.1rem; }
.ficha:nth-child(3n+2) { border-top-color: var(--noche-2); }
.ficha:nth-child(3n)   { border-top-color: var(--lima); }
.ficha h3, .ficha h2 { font-size: 1.35rem; font-weight: 700; margin-bottom: .6rem; }
.ficha h3 a, .ficha h2 a { text-decoration: none; }
.ficha h3 a:hover, .ficha h2 a:hover { text-decoration: underline; }
.ficha p { color: var(--tinta-2); margin: 0; }
.ficha__giro { font-style: italic; font-size: .95rem; margin-bottom: .4rem !important; color: var(--tinta-2); }

/* ---------- método ---------- */

.metodo { background: var(--noche); color: var(--blanco); padding: clamp(4rem, 10vw, 8rem) var(--margen); }
.metodo > * { max-width: var(--ancho); margin-left: auto; margin-right: auto; }
.pasos {
  list-style: none; padding: 0; margin-top: 3rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem;
  counter-reset: paso;
}
.pasos li { counter-increment: paso; }
.pasos li::before {
  content: counter(paso);
  display: block; margin-bottom: .75rem;
  font-family: var(--display); font-weight: 900; font-size: 4.5rem; line-height: 1;
  font-variation-settings: "wdth" 60;
  color: transparent; -webkit-text-stroke: 2px var(--escama);
}
.pasos h3 { font-size: 1.35rem; }
.pasos p { color: #c9d6e8; }
@media (max-width: 900px) { .pasos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pasos { grid-template-columns: 1fr; } }

/* ---------- quién ---------- */

.quien {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
  max-width: var(--ancho); margin: 0 auto; padding: clamp(4rem, 10vw, 7rem) var(--margen);
}
.quien img { width: clamp(140px, 18vw, 220px); mix-blend-mode: multiply; }
@media (max-width: 640px) { .quien { grid-template-columns: 1fr; } }

/* ---------- preguntas ---------- */

.preguntas { max-width: 52rem; margin: 0 auto; padding: 0 var(--margen) clamp(4rem, 10vw, 7rem); }
.preguntas details { border-top: 1px solid var(--linea); }
.preguntas details:last-of-type { border-bottom: 1px solid var(--linea); }
.preguntas summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0; font-weight: 700; font-size: 1.1rem;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: ""; flex: none; width: .9rem; height: .9rem; margin-top: .35rem; border-radius: 50%;
  border: 2px solid var(--tinta); transition: background .2s, transform .2s;
}
.preguntas details[open] summary::after { background: var(--escama); border-color: var(--escama); }
.preguntas details p { color: var(--tinta-2); }
.preguntas__mas { margin-top: 1.5rem; font-weight: 700; }

.preguntas--todas { padding-top: clamp(3rem, 6vw, 5rem); }
.pregunta { border-top: 1px solid var(--linea); padding: 1.5rem 0; }
.pregunta h2 { font-family: var(--texto); font-weight: 700; font-size: 1.2rem; letter-spacing: 0; font-variation-settings: normal; margin-bottom: .5rem; }
.pregunta p { color: var(--tinta-2); margin: 0; }

/* ---------- cierre ---------- */

.cierre {
  position: relative; overflow: hidden;
  background: var(--noche); color: var(--blanco);
  padding: clamp(5rem, 12vw, 9rem) var(--margen);
}
.cierre::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 70% 90% at 30% 50%, rgba(10,26,56,.95) 0%, rgba(10,26,56,.7) 50%, rgba(10,26,56,.2) 100%);
}
.cierre__texto { position: relative; z-index: 2; max-width: var(--ancho); margin: 0 auto; }
.cierre h2 { font-size: clamp(2.2rem, 5.5vw, 4.6rem); max-width: 16ch; font-variation-settings: "wdth" 120; }
.cierre p { color: #d9e4f2; font-size: 1.15rem; max-width: 46ch; }

/* ---------- interiores ---------- */

.interior .barra { position: relative; background: var(--noche); }
.migas { max-width: var(--ancho); margin: 0 auto; padding: 1.5rem var(--margen) 0; font-size: .95rem; color: var(--tinta-2); }
.interior__cabeza { max-width: var(--ancho); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--margen) clamp(2rem, 4vw, 3rem); }
.interior__cabeza h1 { font-size: clamp(2.4rem, 6.5vw, 5.5rem); font-weight: 820; font-variation-settings: "wdth" 118; max-width: 20ch; }
.interior__entrada { font-size: clamp(1.1rem, 1.7vw, 1.35rem); color: var(--tinta-2); max-width: 52ch; }

.detalle {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 5rem);
  max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen) clamp(4rem, 8vw, 6rem);
}
.detalle h2 { font-size: 1.6rem; font-variation-settings: "wdth" 108; margin-top: 1.5rem; }
.detalle section > h2:first-child, .detalle aside > h2:first-child { margin-top: 0; }
.detalle aside { background: var(--blanco); padding: 2rem; border-left: 4px solid var(--escama); align-self: start; }
.detalle aside h3 { font-family: var(--texto); font-size: 1.05rem; letter-spacing: 0; margin: 1.25rem 0 .35rem; }
.detalle aside p { color: var(--tinta-2); }
@media (max-width: 860px) { .detalle { grid-template-columns: 1fr; } }

.lista-escamas { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.lista-escamas li { position: relative; padding: .45rem 0 .45rem 1.9rem; }
.lista-escamas li::before {
  content: ""; position: absolute; left: 0; top: .85rem;
  width: .8rem; height: .8rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--lima), var(--escama) 70%);
}

.trabajos--relacion, .trabajos--lista { padding-top: clamp(3rem, 6vw, 5rem); }
.trabajos--relacion h2 { margin-bottom: 2rem; }

.caso__cuerpo { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen) clamp(4rem, 8vw, 6rem); }
.caso__cuerpo section { max-width: 46rem; }
.caso__cuerpo h2 { font-size: 1.6rem; font-variation-settings: "wdth" 108; margin-top: 2rem; }
.caso__cuerpo p { font-size: 1.15rem; }
.caso__servicio { font-weight: 700; margin-top: 2rem; }

/* ---------- pie ---------- */

.pie { background: var(--noche-3); color: #c9d6e8; padding: 4rem var(--margen) 2rem; font-size: .95rem; }
.pie__grid { max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; }
.pie__marca { font-family: var(--display); font-weight: 800; font-size: 1.6rem; font-variation-settings: "wdth" 120; color: var(--blanco); margin-bottom: .75rem; }
.pie__titulo { color: var(--blanco); font-weight: 700; margin-bottom: .6rem; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: .4rem; }
.pie a { text-decoration: none; }
.pie a:hover { text-decoration: underline; color: var(--blanco); }
.pie__legal { max-width: var(--ancho); margin: 3rem auto 0; color: #7f92b1; font-size: .85rem; }
@media (max-width: 760px) { .pie__grid { grid-template-columns: 1fr; } }

/* ---------- movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .estira span { animation: none; }
  .servicios__lista h3, .servicios__lista h2 { transition: none; }
}

/* ---------- Xenia ---------- */

.xenia { position: fixed; right: clamp(.75rem, 2vw, 1.5rem); bottom: clamp(.75rem, 2vw, 1.5rem); z-index: 40; font-family: var(--texto); }

.xenia svg { display: block; width: 100%; height: 100%; }
.xn-fondo  { fill: #05080f; }
.xn-anillo { fill: none; stroke: var(--escama); stroke-width: 5; }
.xn-ojos   { fill: #3df07c; transform-box: fill-box; transform-origin: center; transition: transform .25s ease-out; }
.xn-ojos rect { transform-box: fill-box; transform-origin: center; animation: xn-parpadeo 5.5s infinite; }
.xn-boca   { fill: none; stroke: #3df07c; stroke-width: 4.5; stroke-linecap: round; transform-box: fill-box; transform-origin: center top; }
@keyframes xn-parpadeo { 0%, 94%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.1); } }
.xn-hablando .xn-boca { animation: xn-hablar .28s ease-in-out infinite alternate; }
@keyframes xn-hablar { from { transform: scaleY(.6); } to { transform: scaleY(1.7); } }

.xn-burbuja {
  display: block; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer;
  filter: drop-shadow(0 0 10px rgba(43, 209, 107, .55)) drop-shadow(0 6px 14px rgba(0, 0, 0, .35));
  transition: transform .2s;
}
.xn-burbuja:hover { transform: scale(1.06); }
.xn-abierta .xn-burbuja { transform: scale(.9); }

.xn-mic {
  position: absolute; right: -4px; bottom: -4px;
  width: 30px; height: 30px; padding: 6px; border-radius: 50%;
  border: 2px solid #05080f; background: #e9eef3; color: #1b2433; cursor: pointer;
}
.xn-mic svg, .xn-dictar svg, .xn-voz svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.xn-mic svg rect, .xn-dictar svg rect { fill: currentColor; stroke: none; }
.xn-oyendo .xn-mic { background: var(--escama); color: var(--noche); animation: xn-pulso 1s infinite; }
.xn-oyendo .xn-tachado { display: none; }
.xn-dictar .xn-tachado, .xn-voz .xn-tachado { display: none; }
.xn-voz[aria-pressed="false"] .xn-tachado { display: inline; }
.xn-voz[aria-pressed="false"] .xn-ondas { display: none; }
.xn-oyendo .xn-dictar { color: var(--escama); }
@keyframes xn-pulso { 50% { box-shadow: 0 0 0 7px rgba(43, 209, 107, .25); } }

.xn-invita {
  position: absolute; right: 88px; bottom: 22px; margin: 0; white-space: nowrap; cursor: pointer;
  background: var(--blanco); color: var(--tinta); font-weight: 700; font-size: .9rem;
  padding: .45rem .8rem; border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.xn-panel {
  position: absolute; right: 0; bottom: 92px;
  width: min(380px, calc(100vw - 1.5rem)); height: min(560px, calc(100svh - 8rem));
  display: flex; flex-direction: column;
  background: var(--noche); color: var(--blanco);
  border: 1px solid #23406f; border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.xn-panel[hidden] { display: none; }

.xn-cabeza { display: flex; align-items: center; gap: .7rem; padding: .8rem .9rem; border-bottom: 1px solid #1d3762; }
.xn-cabeza > div { flex: 1; }
.xn-mini { width: 38px; height: 38px; flex: none; }
.xn-nombre { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.1rem; font-variation-settings: "wdth" 115; line-height: 1.1; }
.xn-rol { margin: 0; font-size: .82rem; color: #9fb2cf; }
.xn-icono {
  flex: none; width: 36px; height: 36px; padding: 8px; border: 0; border-radius: 50%;
  background: transparent; color: #c9d6e8; cursor: pointer; font-size: 1.5rem; line-height: 1;
}
.xn-icono:hover { background: #17305a; color: var(--blanco); }
.xn-cerrar { padding: 0; }

.xn-mensajes { flex: 1; overflow-y: auto; padding: 1rem .9rem; display: flex; flex-direction: column; gap: .7rem; overscroll-behavior: contain; }
.xn-msg { max-width: 88%; }
.xn-msg p { margin: 0; padding: .65rem .85rem; font-size: .96rem; line-height: 1.45; border-radius: 16px; }
.xn-msg--xenia p { background: #142c56; border-top-left-radius: 4px; }
.xn-msg--persona { align-self: flex-end; }
.xn-msg--persona p { background: var(--escama); color: var(--noche); border-top-right-radius: 4px; font-weight: 700; }
.xn-acciones { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.xn-acciones a, .xn-chip {
  font: inherit; font-size: .85rem; font-weight: 700; text-decoration: none; cursor: pointer;
  padding: .4rem .75rem; border-radius: 999px; border: 1px solid #2d4f86; background: transparent; color: var(--blanco);
}
.xn-acciones a:hover, .xn-chip:hover { border-color: var(--escama); color: var(--lima); }
.xn-acciones .xn-wa { background: var(--escama); border-color: var(--escama); color: var(--noche); }
.xn-acciones .xn-wa:hover { background: var(--lima); color: var(--noche); }

.xn-forma { display: flex; align-items: center; gap: .35rem; padding: .7rem; border-top: 1px solid #1d3762; }
.xn-forma input {
  flex: 1; min-width: 0; font: inherit; font-size: 1rem; color: var(--blanco);
  background: #0f2247; border: 1px solid #23406f; border-radius: 999px; padding: .6rem .9rem;
}
.xn-forma input::placeholder { color: #7f92b1; }
.xn-enviar {
  font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer;
  background: var(--escama); color: var(--noche); border: 0; border-radius: 999px; padding: .6rem .9rem;
}
.xn-enviar:hover { background: var(--lima); }
.xn-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 520px) {
  .xn-burbuja { width: 62px; height: 62px; }
  .xn-panel { bottom: 76px; }
  .xn-invita { right: 74px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .xn-ojos rect, .xn-hablando .xn-boca, .xn-oyendo .xn-mic { animation: none; }
}

/* niveles de los talleres: misma banda oscura que "Cómo trabajamos", tres columnas */
.niveles { margin-bottom: clamp(3rem, 6vw, 5rem); }
.niveles .pasos { grid-template-columns: repeat(3, 1fr); margin-top: 2rem; }
@media (max-width: 900px) { .niveles .pasos { grid-template-columns: 1fr; } }