/* REIRTE · Andrés Solari — estilos del sitio, versión 4 (noviembre 2026)
   Idea: el círculo del logo es un sol. En el inicio ocupa toda la pantalla
   y al entrar a una sección se achica y se va a un rincón.
   Colores: naranja REIRTE, azul noche y blanco. Tipografía: Archivo
   (Omnibus-Type, Argentina), usando sus anchos: expandida para títulos.

   Cada página es una "sala" con su color:
     .sala--naranja  inicio y contacto
     .sala--blanca   servicios, con IA, sobre mí y páginas de detalle
     .sala--noche    proyectos                                              */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --naranja: #FF9F0A;
  --naranja-hondo: #F08A00;
  --naranja-texto: #D97800; /* naranja para letras grandes sobre blanco */
  --sol: #FFC247;
  --noche: #16184A;
  --noche-2: #25286B;
  --blanco: #FFFFFF;
  --bruma: #F1F1F9;
  --verde: #1DB37E;

  --fuente: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(18px, 4.4vw, 56px);
  --ancho: 1240px;
  --alto-barra: 72px;
  --alto-tabs: 0px;

  --t-chico: .875rem;
  --t-base: 1.0625rem;
  --t-medio: 1.1875rem;
  --t-h3: 1.375rem;
  --t-h2: clamp(1.625rem, 1.2rem + 1.5vw, 2.25rem);
  --t-h1: clamp(2.125rem, 1.25rem + 3.4vw, 3.75rem);
  --t-titular: clamp(2.625rem, min(1rem + 5.6vw, 10.6vh), 5.75rem);
}

.sala--blanca {
  --fondo: var(--blanco);
  --texto: var(--noche);
  --texto-2: #50537D;
  --superficie: var(--bruma);
  --borde: rgba(22, 24, 74, .16);
  --acento: var(--naranja);
  --sobre-acento: var(--noche);
  --marca: var(--naranja);
  --arco: var(--naranja);
}
.sala--naranja {
  --fondo: var(--naranja);
  --texto: var(--noche);
  --texto-2: #3D3145;
  --superficie: var(--blanco);
  --borde: rgba(22, 24, 74, .3);
  --acento: var(--noche);
  --sobre-acento: var(--blanco);
  --marca: var(--noche);
  --arco: var(--noche);
}
.sala--noche {
  --fondo: var(--noche);
  --texto: var(--blanco);
  --texto-2: #C7C9EC;
  --superficie: var(--noche-2);
  --borde: rgba(255, 255, 255, .22);
  --acento: var(--naranja);
  --sobre-acento: var(--noche);
  --marca: var(--naranja);
  --arco: var(--naranja);
}

@media (max-width: 859px) {
  :root {
    --alto-barra: 60px;
    --alto-tabs: calc(62px + env(safe-area-inset-bottom, 0px));
  }
}

/* Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-barra) + 16px); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--alto-tabs);
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--t-base);
  font-weight: 420;
  font-stretch: 100%;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main { flex: 1; position: relative; z-index: 1; display: flex; flex-direction: column; }
img, svg, video, canvas, iframe { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.08; letter-spacing: -.012em; text-wrap: balance; overflow-wrap: break-word; }
p, figure, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p + p { margin-top: .85em; }
strong { font-weight: 720; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--arco); text-decoration-thickness: 2px; text-underline-offset: .2em; }
a:hover { text-decoration-color: currentColor; }
a, button, summary { -webkit-tap-highlight-color: rgba(255, 159, 10, .2); }
:focus-visible { outline: 3px solid var(--texto); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--noche); color: var(--blanco); }
.sala--noche ::selection { background: var(--naranja); color: var(--noche); }

.envoltura { width: min(var(--ancho), 100% - 2 * var(--gutter)); margin-inline: auto; }
main > .envoltura:last-child:not(.sigue) { padding-bottom: clamp(32px, 6vh, 64px); }
.oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -80px; z-index: 60; background: var(--noche); color: var(--blanco); padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 700; }
.saltar:focus { top: 12px; }
.ico { width: 1.15em; height: 1.15em; flex: none; }

/* El sol ---------------------------------------------------------- */
.sol {
  position: fixed;
  z-index: 0;
  right: -10vmin;
  bottom: calc(var(--alto-tabs) - 12vmin);
  width: 34vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--naranja);
  pointer-events: none;
  view-transition-name: sol;
}
.sala--naranja .sol { inset: 0; width: auto; aspect-ratio: auto; border-radius: 0; }
/* Con IA y Sobre mí tienen su propio sol, dibujado dentro de la página */
.sol-propio { aspect-ratio: 1; border-radius: 50%; background: var(--naranja); pointer-events: none; view-transition-name: sol; }
@media (min-width: 860px) { .pagina--ia .sol, .pagina--sobre-mi .sol { display: none; } }

/* Barra superior -------------------------------------------------- */
.barra { position: sticky; top: 0; z-index: 40; height: var(--alto-barra); background: var(--fondo); view-transition-name: barra; }
.barra-fila { height: 100%; display: flex; align-items: center; gap: 20px; }
.marca { display: inline-flex; align-items: center; gap: 9px; color: var(--marca); text-decoration: none; margin-right: auto; }
.marca-cara { width: 38px; height: 38px; }
.marca-nombre { font-weight: 900; font-stretch: 108%; font-size: 1.5rem; letter-spacing: .06em; line-height: 1; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { position: relative; padding: 10px 14px 14px; font-weight: 600; font-size: 1rem; text-decoration: none; color: var(--texto); border-radius: 10px; }
.nav a:hover { background: color-mix(in srgb, var(--texto) 8%, transparent); }
.nav a[aria-current="page"] { font-weight: 800; }
/* la sonrisa del logo marca dónde estás */
.nav a[aria-current="page"]::after, .tabs a[aria-current="page"]::after {
  content: "";
  position: absolute; left: 50%; bottom: 3px; width: 24px; height: 9px; transform: translateX(-50%);
  background: var(--arco);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 9'%3E%3Cpath d='M2 2c5.6 6 14.4 6 20 0' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 9'%3E%3Cpath d='M2 2c5.6 6 14.4 6 20 0' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Botones --------------------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 50px; padding: .72em 1.35em;
  border: 2px solid var(--acento); border-radius: 999px;
  background: var(--acento); color: var(--sobre-acento);
  font-weight: 750; font-stretch: 104%; font-size: 1rem; line-height: 1.15; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.boton:hover { background: var(--texto); border-color: var(--texto); color: var(--fondo); }
.sala--naranja .boton:hover { background: var(--blanco); border-color: var(--blanco); color: var(--noche); }
.boton--linea { background: transparent; border-color: var(--texto); color: var(--texto); }
.boton--linea:hover { background: var(--texto); color: var(--fondo); }
.sala--naranja .boton--linea:hover { background: var(--noche); border-color: var(--noche); color: var(--blanco); }
.boton--chico { min-height: 42px; padding: .5em 1.05em; font-size: .9375rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.enlace { font-weight: 700; }

/* Pestañas de abajo (celular) ------------------------------------- */
.tabs { display: none; }
@media (max-width: 859px) {
  /* en el celular el sol sale justo arriba de la pestaña en la que estás */
  .sol { z-index: 49; right: auto; left: calc((var(--tab, 0) + .5) * 20vw - 15px); bottom: calc(var(--alto-tabs) - 15px); width: 30px; }
  .sala--naranja .sol { z-index: 0; left: 0; bottom: 0; }
  .sol-propio { view-transition-name: none; }
  .pagina--servicios, .pagina--invitaciones { --tab: 1; }
  .pagina--proyectos, .pagina--libro, .pagina--xarivari, .pagina--juegos { --tab: 2; }
  .pagina--ia { --tab: 3; }
  .pagina--sobre-mi { --tab: 4; }
  .sigue-nombre { font-size: 1.3125rem; }
  .nav { display: none; }
  .barra-wa { min-height: 40px; }
  .tabs {
    position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
    height: var(--alto-tabs); padding-bottom: env(safe-area-inset-bottom, 0px);
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--fondo); border-top: 1px solid var(--borde);
    view-transition-name: tabs;
  }
  .tabs a {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding-bottom: 9px; color: var(--texto-2); text-decoration: none;
    font-size: .71875rem; font-weight: 600; font-stretch: 94%; line-height: 1;
  }
  .tabs .ico { width: 23px; height: 23px; }
  .tabs a[aria-current="page"] { color: var(--texto); font-weight: 800; }
  .tabs a[aria-current="page"]::after { bottom: 4px; width: 20px; height: 7px; }
}

/* Cabeza de cada sección ----------------------------------------- */
.cabeza { padding-block: clamp(14px, 3.2vh, 40px) clamp(14px, 2.6vh, 28px); }
.titulo { font-size: var(--t-h1); font-weight: 900; font-stretch: 112%; line-height: 1; letter-spacing: -.022em; max-width: 24ch; }
.bajada { margin-top: .7em; max-width: 58ch; font-size: var(--t-medio); line-height: 1.45; color: var(--texto-2); }
.migas { margin-bottom: 10px; font-size: var(--t-chico); font-weight: 600; }
.migas a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--texto-2); }
.migas a:hover { color: var(--texto); }

/* Solapas dentro de una sección ---------------------------------- */
.solapas { display: flex; gap: 0 clamp(18px, 2.4vw, 30px); margin-bottom: clamp(18px, 3vh, 30px); overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -2px 0 var(--borde); }
@media (max-width: 859px) { .solapas { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } }
.solapas::-webkit-scrollbar { display: none; }
.solapa {
  flex: none; appearance: none; cursor: pointer;
  min-height: 46px; padding: 8px 1px 10px; border: 0; border-bottom: 4px solid transparent; border-radius: 0;
  background: transparent; color: var(--texto-2);
  font-weight: 700; font-size: 1.0313rem; white-space: nowrap;
}
.solapa:hover { color: var(--texto); }
.solapa:focus-visible { outline-offset: -3px; }
.solapa[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--naranja); font-weight: 800; }
html.js [role="tabpanel"]:not([data-activo]) { display: none; }
html:not(.js) .solapas { display: none; }
html:not(.js) .panel + .panel { margin-top: 48px; }
.panel-titulo { font-size: var(--t-h2); font-weight: 900; font-stretch: 110%; margin-bottom: .6em; }
html.js .solapas ~ .panel > .panel-titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Selector: lista a la izquierda, ficha a la derecha ------------- */
.selector { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: clamp(20px, 3.4vw, 56px); align-items: start; }
.selector-lista { display: flex; flex-direction: column; gap: 4px; }
.selector-grupo { margin: 12px 0 2px 16px; font-size: var(--t-chico); font-weight: 600; color: var(--texto-2); }
.selector-grupo:first-child { margin-top: 0; }
.selector-item {
  appearance: none; cursor: pointer; width: 100%; text-align: left;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 16px; border: 0; border-radius: 14px; background: transparent; color: var(--texto);
}
.selector-item:hover { background: color-mix(in srgb, var(--texto) 8%, transparent); }
.selector-item b { font-weight: 720; font-stretch: 104%; font-size: 1.0938rem; line-height: 1.2; }
.selector-item span { flex: none; font-size: .8438rem; color: var(--texto-2); }
.selector-item[aria-selected="true"] { background: var(--texto); color: var(--fondo); }
.selector-item[aria-selected="true"] span { color: inherit; opacity: .82; }
html:not(.js) .selector { display: block; }
html:not(.js) .selector-lista { display: none; }
html:not(.js) .ficha + .ficha { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--borde); }

.ficha h2 { font-size: var(--t-h2); font-weight: 900; font-stretch: 110%; letter-spacing: -.018em; }
.ficha .resumen { margin-top: .5em; font-size: var(--t-medio); line-height: 1.4; color: var(--texto-2); max-width: 52ch; }
.precios { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.precios > div { padding: 12px 18px 13px; border-radius: 16px; background: var(--superficie); }
.precios dt { font-size: var(--t-chico); font-weight: 600; color: var(--texto-2); }
.precios dd { font-size: 1.625rem; font-weight: 900; font-stretch: 108%; line-height: 1.1; letter-spacing: -.01em; }
.precios dd small { font-size: .9375rem; font-weight: 600; font-stretch: 100%; letter-spacing: 0; }
.lista { margin-top: 20px; display: grid; gap: 9px; max-width: 64ch; }
.lista li { position: relative; padding-left: 22px; }
.lista li::before { content: ""; position: absolute; left: 2px; top: .58em; width: 9px; height: 9px; border-radius: 50%; background: var(--naranja); }
.sala--naranja .lista li::before { background: var(--noche); }
.ficha .acciones { margin-top: 24px; }
.ficha .nota { margin-top: 14px; font-size: var(--t-chico); color: var(--texto-2); }

@media (max-width: 859px) {
  .selector { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .selector-lista { flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .selector-lista::-webkit-scrollbar { display: none; }
  .selector-grupo { display: none; }
  .selector-item { flex: none; width: auto; padding: 10px 16px; border: 2px solid var(--borde); border-radius: 999px; }
  .selector-item b { font-size: .9375rem; white-space: nowrap; }
  .selector-item span { display: none; }
  .selector-item[aria-selected="true"] { border-color: var(--texto); }
}

/* Pasos (sí son una secuencia) ----------------------------------- */
.pasos { counter-reset: paso; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.pasos li { counter-increment: paso; padding-top: 14px; border-top: 3px solid var(--naranja); }
.pasos li::before { content: counter(paso); display: block; font-size: 3rem; font-weight: 900; font-stretch: 120%; line-height: 1; margin-bottom: 10px; }
.pasos strong { display: block; font-size: var(--t-h3); font-weight: 800; line-height: 1.15; margin-bottom: 6px; }
.pasos li > span { color: var(--texto-2); }
@media (max-width: 859px) { .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pasos li::before { font-size: 2.25rem; } }
@media (max-width: 479px) { .pasos { grid-template-columns: minmax(0, 1fr); } }

/* Preguntas ------------------------------------------------------- */
.preguntas { max-width: 780px; border-top: 2px solid var(--texto); }
.preguntas details { border-bottom: 1px solid var(--borde); }
.preguntas summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 2px; font-weight: 720; font-size: var(--t-medio); }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 2.5px no-repeat, linear-gradient(currentColor, currentColor) center / 2.5px 100% no-repeat; transition: transform .2s; }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { padding: 0 2px 18px; max-width: 64ch; color: var(--texto-2); }

/* Grilla de rasgos (invitaciones, libro) ------------------------- */
.rasgos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px) clamp(20px, 3vw, 44px); }
.rasgos h3 { font-size: 1.1875rem; font-weight: 800; padding-top: 12px; border-top: 3px solid var(--naranja); margin-bottom: 6px; }
.rasgos p { color: var(--texto-2); font-size: 1rem; }
@media (max-width: 859px) { .rasgos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .rasgos { grid-template-columns: minmax(0, 1fr); } }

/* Página de detalle: texto a la izquierda, imagen a la derecha ---- */
.detalle { display: grid; grid-template-columns: minmax(0, 1fr) var(--col-imagen, 250px); gap: clamp(20px, 4vw, 64px); align-items: start; }
.detalle--ancha { --col-imagen: minmax(0, .8fr); }
.detalle-imagen { position: relative; padding-top: clamp(14px, 3.2vh, 40px); }
.detalle-imagen img { border-radius: 22px; box-shadow: 0 24px 60px -24px rgba(22, 24, 74, .45); }
.detalle-imagen--celular img { width: min(250px, 56vw); border: 8px solid var(--noche); border-radius: 34px; }
.detalle-imagen--tapa img { width: min(250px, 56vw); border-radius: 10px; }
.detalle-imagen--ancha img { width: 100%; }
.detalle .precio-suelto { margin-top: 14px; font-size: var(--t-medio); }
.detalle .precio-suelto strong { font-size: 1.625rem; font-weight: 900; font-stretch: 108%; }
.detalle .acciones { margin-top: 18px; }
.detalle .nota { margin-top: 14px; font-size: var(--t-chico); color: var(--texto-2); max-width: 56ch; }
.detalle-cuerpo { margin-top: clamp(22px, 4vh, 40px); }
@media (max-width: 859px) {
  .detalle, .detalle--ancha { grid-template-columns: minmax(0, 1fr); }
  .detalle-imagen { order: 2; padding-top: 0; }
  .detalle-imagen--celular img, .detalle-imagen--tapa img { margin-inline: auto; }
}

.prosa { max-width: 64ch; }
.prosa p + p { color: var(--texto-2); }
.prosa--pareja p + p { color: var(--texto); }
.prosa p.fuerte { color: var(--texto); font-size: var(--t-medio); }

/* Lista de juegos ------------------------------------------------- */
.juegos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.juego { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 20px; border-radius: 20px; background: var(--superficie); }
.juego h2 { font-size: var(--t-h3); font-weight: 850; font-stretch: 106%; }
.juego h2 a { text-decoration: none; }
.juego h2 a::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
.juego:hover { background: var(--noche); color: var(--blanco); }
.juego:hover .juego-tipo, .juego:hover p { color: #C7C9EC; }
.juego-tipo { font-size: var(--t-chico); font-weight: 600; color: var(--texto-2); }
.juego p { color: var(--texto-2); font-size: 1rem; }
.juego .juego-jugar { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: inherit; }
.juego .nuevo { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: var(--naranja); color: var(--noche); font-size: .75rem; font-weight: 800; }
@media (max-width: 859px) { .juegos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 519px) { .juegos { grid-template-columns: minmax(0, 1fr); } }

/* Llamado al final de una página --------------------------------- */
.llamado { margin-top: clamp(28px, 5vh, 56px); padding: clamp(20px, 3vw, 32px); border-radius: 26px; background: var(--superficie); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.llamado h2 { font-size: var(--t-h2); font-weight: 900; font-stretch: 108%; }
.llamado p { margin-top: 6px; color: var(--texto-2); max-width: 52ch; }

/* "Seguí con" ----------------------------------------------------- */
.sigue { margin-top: auto; padding-block: clamp(28px, 5vh, 56px) clamp(18px, 3vh, 28px); display: flex; }
.sigue-enlace { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; text-decoration: none; }
.sigue-pre { flex: none; font-size: var(--t-chico); font-weight: 600; color: var(--texto-2); white-space: nowrap; }
.sigue-nombre { font-size: 1.5rem; font-weight: 900; font-stretch: 112%; letter-spacing: -.015em; text-decoration: underline; text-decoration-color: var(--arco); text-decoration-thickness: 3px; text-underline-offset: .18em; }
.sigue-enlace .ico { width: 1.25rem; height: 1.25rem; align-self: center; }
.sigue-enlace:hover .sigue-nombre { text-decoration-color: currentColor; }

/* Pie ------------------------------------------------------------- */
.pie { position: relative; z-index: 1; padding-block: 16px 20px; font-size: .8438rem; color: var(--texto-2); background: var(--fondo); border-top: 1px solid var(--borde); }
.pie-fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 28px; }
.pie nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.pie a { text-decoration: none; font-weight: 600; color: var(--texto); }
.pie a:hover { text-decoration: underline; }

/* ================================================================= */
/* INICIO                                                            */
/* ================================================================= */
.inicio { flex: 1; display: flex; flex-direction: column; min-height: calc(100dvh - var(--alto-barra) - var(--alto-tabs)); }
.inicio-cuerpo { flex: 1; display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); gap: clamp(16px, 3vw, 48px); }
.inicio-texto { align-self: center; padding-block: clamp(12px, 3vh, 40px); }
.saludo { font-size: clamp(1.0625rem, .9rem + .6vw, 1.375rem); line-height: 1.3; }
.saludo strong { font-weight: 800; }
.titular { margin-top: .22em; font-size: var(--t-titular); font-weight: 900; font-stretch: 108%; line-height: .93; letter-spacing: -.03em; text-wrap: balance; }
.inicio .bajada { color: var(--texto); margin-top: 1em; max-width: 46ch; font-size: clamp(1.0625rem, .95rem + .45vw, 1.25rem); }

.idea { margin-top: clamp(18px, 3vh, 30px); max-width: 680px; }
.idea-rotulo { display: block; margin-bottom: 8px; font-weight: 800; font-size: 1.0625rem; }
.idea-caja { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--blanco); box-shadow: 0 14px 34px -18px rgba(22, 24, 74, .6); }
.idea-caja:focus-within { outline: 3px solid var(--noche); outline-offset: 2px; }
.idea-caja input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 6px 0 18px; font-size: 1.0625rem; color: var(--noche); outline: none; }
.idea-caja input::placeholder { color: #6B6E96; opacity: 1; }
.idea-caja .boton { flex: none; min-height: 48px; }
.idea-ejemplos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.idea-ejemplos button { appearance: none; cursor: pointer; min-height: 36px; padding: .3em .9em; border-radius: 999px; border: 1.5px solid var(--borde); background: transparent; font-size: .9063rem; font-weight: 600; }
.idea-ejemplos button:hover { background: var(--noche); border-color: var(--noche); color: var(--blanco); }
@media (min-width: 860px) { .inicio-texto:has(.idea-respuesta:not([hidden])) .bajada { display: none; } }
.idea-respuesta { margin-top: 12px; padding: 18px 20px 20px; border-radius: 24px; background: var(--blanco); color: var(--noche); box-shadow: 0 14px 34px -18px rgba(22, 24, 74, .6); }
.idea-respuesta .veredicto { font-size: 1.75rem; font-weight: 900; font-stretch: 112%; line-height: 1.05; letter-spacing: -.02em; }
.idea-respuesta p + p { margin-top: .45em; }
.idea-respuesta .precio { font-weight: 720; }
.idea-respuesta .acciones { margin-top: 14px; }
.idea-respuesta .boton { background: var(--naranja); border-color: var(--naranja); color: var(--noche); }
.idea-respuesta .boton:hover { background: var(--noche); border-color: var(--noche); color: var(--blanco); }
.idea-respuesta a:not(.boton) { text-decoration-color: var(--naranja); font-weight: 700; }
.idea-respuesta .otra { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; font-weight: 700; text-decoration: underline; text-decoration-color: var(--naranja); text-decoration-thickness: 2px; text-underline-offset: .2em; }

.inicio-foto { position: relative; align-self: end; justify-self: center; width: min(100%, 540px, 62vh); }
.inicio-foto .disco { position: absolute; left: 1%; top: 5%; width: 98%; aspect-ratio: 1; border-radius: 50%; background: var(--sol); }
.inicio-foto img { position: relative; width: 100%; }

.vivo { position: relative; background: var(--noche); color: var(--blanco); }
.vivo-fila { display: flex; align-items: center; gap: 8px 26px; min-height: 58px; padding-block: 10px; }
.vivo-rotulo { flex: none; display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: .9375rem; }
.punto { width: 10px; height: 10px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgba(29, 179, 126, .28); }
.vivo ul { display: flex; gap: 4px 22px; flex-wrap: wrap; }
.vivo li a { font-weight: 600; font-size: .9375rem; text-decoration: none; white-space: nowrap; }
.vivo li a:hover { text-decoration: underline; text-decoration-color: var(--naranja); }
.vivo li:last-child { margin-left: auto; }
.vivo li:last-child a { color: var(--naranja); font-weight: 800; }
.pagina--inicio .pie { border-top: 0; background: var(--noche); color: #C7C9EC; }
.pagina--inicio .pie a { color: var(--blanco); }

@media (max-width: 859px) {
  .inicio-cuerpo { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "saludo foto" "titular titular" "bajada bajada" "idea idea"; gap: 0 12px; align-content: start; padding-top: 6px; }
  .inicio-texto { display: contents; }
  .inicio .saludo { grid-area: saludo; align-self: center; font-size: 1.0625rem; }
  .saludo strong { display: block; font-size: 1.4375rem; font-stretch: 106%; line-height: 1.12; margin-bottom: 4px; }
  .saludo span { display: block; }
  .idea-ejemplos { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .idea-ejemplos::-webkit-scrollbar { display: none; }
  .idea-ejemplos button { white-space: nowrap; }
  .inicio .titular { grid-area: titular; margin-top: 12px; }
  .inicio .bajada { grid-area: bajada; margin-top: 12px; }
  .idea { grid-area: idea; margin-top: 18px; margin-bottom: 22px; }
  .inicio-foto { grid-area: foto; width: min(40vw, 168px); align-self: end; margin-right: -6px; }
  .idea-caja { border-radius: 26px; flex-direction: column; padding: 8px; }
  .idea-caja input { padding: 12px 12px 10px; }
  .vivo-fila { flex-direction: column; align-items: flex-start; gap: 8px; padding-block: 14px; }
  .vivo ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .vivo ul::-webkit-scrollbar { display: none; }
  .vivo li:last-child { margin-left: 0; }
}

/* ================================================================= */
/* PROYECTOS                                                         */
/* ================================================================= */
.pantalla { position: relative; border-radius: 18px; overflow: hidden; background: #0B0C2A; aspect-ratio: 40 / 21; max-height: 41dvh; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8); }
.pantalla img { width: 100%; height: 100%; object-fit: cover; }
.pantalla a { display: block; height: 100%; }
.obra-info { margin-top: 18px; }
.obra-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.obra-info h2 { font-size: var(--t-h2); font-weight: 900; font-stretch: 110%; letter-spacing: -.018em; }
.obra-tipo { font-weight: 600; color: var(--naranja); }
.obra-info .descripcion { margin-top: 8px; color: var(--texto-2); max-width: 62ch; }
.obra-info .acciones { margin-top: 16px; gap: 10px 16px; }
.estado { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-chico); font-weight: 700; color: var(--texto-2); }
.ficha--texto { max-width: 62ch; }
.ficha--texto p { color: var(--texto-2); font-size: var(--t-medio); }
.ficha--texto .acciones { margin-top: 22px; }
@media (max-width: 859px) { .pantalla { max-height: none; } [data-probar] { display: none; } }
html:not(.js) [data-probar] { display: none; }

.probador { width: min(460px, 96vw); max-height: 96dvh; padding: 14px 14px 18px; border: 0; border-radius: 30px; background: var(--noche-2); color: var(--blanco); }
.probador::backdrop { background: rgba(11, 12, 42, .78); }
.probador-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding-inline: 6px; }
.probador-barra strong { font-weight: 800; font-stretch: 106%; }
.probador-barra a { font-size: var(--t-chico); font-weight: 700; color: var(--blanco); }
.probador-cerrar { appearance: none; cursor: pointer; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: var(--blanco); }
.probador-cerrar:hover { background: var(--naranja); color: var(--noche); }
.telefono { width: 100%; height: min(760px, 96dvh - 96px); border: 9px solid #0B0C2A; border-radius: 34px; overflow: hidden; background: var(--blanco); }
.telefono iframe { width: 100%; height: 100%; border: 0; }

/* ================================================================= */
/* CON IA                                                            */
/* ================================================================= */
.ia-frase { padding-block: clamp(10px, 3vh, 36px) clamp(18px, 4vh, 40px); font-weight: 900; line-height: .96; letter-spacing: -.02em; }
.ia-frase span { display: block; }
.ia-frase .chica { font-size: clamp(1.375rem, 1rem + 2vw, 2.5rem); font-stretch: 104%; }
.ia-frase .meses { font-size: clamp(3rem, 1rem + 11.5vw, 11rem); font-stretch: 125%; letter-spacing: .2em; margin-right: -.2em; line-height: .88; white-space: nowrap; }
.ia-frase .dias { margin-top: .1em; font-size: clamp(3rem, 1rem + 11.5vw, 11rem); line-height: .88; }
.ia-frase .dias i { font-style: normal; font-size: .36em; font-stretch: 104%; letter-spacing: -.02em; margin-right: .32em; vertical-align: .2em; }
.ia-frase .dias b { display: inline-block; font-weight: 900; font-stretch: 62%; letter-spacing: -.03em; padding: .06em .14em .02em; border-radius: .11em; background: var(--naranja); }
@media (prefers-reduced-motion: no-preference) {
  html.js .ia-frase .meses { animation: estirar 1.5s cubic-bezier(.2, .7, .2, 1) both; }
  html.js .ia-frase .dias b { animation: llegar .5s 1.2s cubic-bezier(.2, 1.4, .4, 1) both; }
  @keyframes estirar { from { letter-spacing: -.02em; font-stretch: 62%; } }
  @keyframes llegar { from { opacity: 0; transform: translateX(-.25em); } }
}
.ia-cuerpo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.ia-cuerpo .intro { font-size: var(--t-medio); line-height: 1.45; }
.ia-cuerpo .intro p + p { color: var(--texto-2); font-size: var(--t-base); }
.ia-col h2 { font-size: var(--t-h3); font-weight: 900; font-stretch: 108%; padding-bottom: 10px; border-bottom: 3px solid var(--borde); }
.ia-col--yo h2 { border-color: var(--naranja); }
.ia-col .lista { margin-top: 14px; }
.ia-col:not(.ia-col--yo) .lista li::before { background: transparent; border: 2px solid var(--texto-2); }
.ia-salieron { margin-top: clamp(24px, 4vh, 44px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.ia-salieron p { font-weight: 800; margin-right: 4px; }
.ia-salieron a, .ia-salieron span { padding: .38em .95em; border-radius: 999px; background: var(--superficie); font-weight: 600; font-size: .9688rem; text-decoration: none; }
.ia-salieron a:hover { background: var(--noche); color: var(--blanco); }
.ia-cierre { position: relative; margin-top: clamp(30px, 6vh, 64px); overflow: hidden; padding: clamp(60px, 13vh, 130px) 0 clamp(26px, 5vh, 48px); text-align: center; }
.ia-cierre .sol-propio { position: absolute; left: 50%; top: 0; width: 230vw; transform: translateX(-50%); }
.ia-cierre > .envoltura { position: relative; }
.ia-cierre h2 { font-size: var(--t-h1); font-weight: 900; font-stretch: 112%; letter-spacing: -.022em; line-height: 1; max-width: 18ch; margin-inline: auto; }
.ia-cierre p { margin: 14px auto 0; max-width: 44ch; font-size: var(--t-medio); }
.ia-cierre .acciones { justify-content: center; margin-top: 22px; }
.ia-cierre .boton { background: var(--noche); border-color: var(--noche); color: var(--blanco); }
.ia-cierre .boton:hover { background: var(--blanco); border-color: var(--blanco); color: var(--noche); }
.pagina--ia .sigue { background: var(--naranja); width: 100%; padding-inline: max(var(--gutter), (100% - var(--ancho)) / 2); margin-top: 0; --texto-2: #3D3145; --arco: var(--noche); }
.pagina--ia .pie { background: var(--naranja); border-top-color: rgba(22, 24, 74, .3); --texto-2: #3D3145; }
@media (max-width: 859px) { .ia-cuerpo { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================= */
/* SOBRE MÍ                                                          */
/* ================================================================= */
.sobre { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 80px); align-items: start; padding-top: clamp(14px, 3.2vh, 40px); }
.sobre-foto { width: min(100%, 470px); justify-self: center; padding-top: clamp(20px, 5vh, 56px); }
.sobre-retrato { position: relative; padding: 9% 9% 0 0; }
.sobre-retrato .sol-propio { position: absolute; right: 0; top: 0; width: 46%; }
.sobre-retrato img { position: relative; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 30% 50%; border-radius: 24px; }
.sobre-foto figcaption { margin-top: 12px; font-size: var(--t-chico); color: var(--texto-2); }
.sobre .cita { margin-top: .6em; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 650; line-height: 1.22; letter-spacing: -.01em; max-width: 26ch; text-wrap: balance; }
.sobre .solapas { margin-top: clamp(18px, 3vh, 30px); }
.recorrido { display: grid; gap: 0; max-width: 560px; }
.recorrido li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--borde); }
.recorrido li:last-child { border-bottom: 0; }
.recorrido .anio { font-weight: 900; font-stretch: 116%; font-size: 1.1875rem; }
.recorrido li:last-child .anio { color: var(--naranja-texto); }
.herramientas { display: grid; gap: 0; max-width: 620px; }
.herramientas > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--borde); }
.herramientas > div:last-child { border-bottom: 0; }
.herramientas dt { font-weight: 800; }
.herramientas dd { color: var(--texto-2); }
@media (max-width: 859px) {
  .sobre { grid-template-columns: minmax(0, 1fr); }
  .sobre-foto { width: min(100%, 420px); justify-self: start; padding-top: 0; order: 2; }
  .herramientas > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ================================================================= */
/* CONTACTO                                                          */
/* ================================================================= */
.contacto { flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 5vw, 80px); align-items: center; padding-block: clamp(14px, 3.2vh, 40px); }
.contacto .titular { font-size: clamp(2.5rem, 1rem + 4.6vw, 4.75rem); }
.contacto .bajada { color: var(--texto); }
.armador { margin-top: clamp(18px, 3vh, 28px); max-width: 600px; }
.armador fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.armador legend, .armador label { display: block; padding: 0; margin-bottom: 8px; font-weight: 800; }
.opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.opcion { appearance: none; cursor: pointer; min-height: 42px; padding: .4em 1em; border-radius: 999px; border: 2px solid var(--borde); background: transparent; font-weight: 650; font-size: .9688rem; }
.opcion:hover { border-color: var(--noche); }
.opcion[aria-pressed="true"] { background: var(--noche); border-color: var(--noche); color: var(--blanco); }
.armador label { margin-top: 18px; }
.armador textarea { display: block; width: 100%; min-height: 84px; resize: vertical; padding: 12px 16px; border: 0; border-radius: 18px; background: var(--blanco); color: var(--noche); line-height: 1.4; }
.armador textarea:focus-visible { outline: 3px solid var(--noche); outline-offset: 2px; border-radius: 18px; }
.mensaje-previo { margin-top: 14px; font-size: var(--t-chico); color: var(--texto-2); }
.mensaje-previo q { color: var(--texto); font-weight: 600; }
.armador .acciones { margin-top: 16px; }
.contacto-lado { display: grid; gap: clamp(16px, 3vh, 28px); justify-items: start; }
.cara { width: min(250px, 52vw); height: auto; color: var(--noche); }
.cara .ojo { transition: transform .12s ease-out; }
.datos { display: grid; gap: 0; width: 100%; max-width: 420px; border-top: 2px solid var(--noche); }
.datos li { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--borde); }
.datos .dato-nombre { font-size: var(--t-chico); font-weight: 600; color: var(--texto-2); align-self: center; }
.datos a { font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.datos a:hover { text-decoration: underline; }
.pagina--contacto .pie { border-top-color: rgba(22, 24, 74, .3); }
@media (max-width: 859px) {
  .contacto { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .cara { display: none; }
}

/* 404 ------------------------------------------------------------- */
.perdido { flex: 1; display: grid; align-content: center; padding-block: 40px; }
.perdido .titular { max-width: 12ch; }
.perdido .bajada { color: var(--texto); }
.perdido .acciones { margin-top: 24px; }

/* Pasar de una sección a otra ------------------------------------ */
@view-transition { navigation: auto; }
main { view-transition-name: escena; }
::view-transition-group(sol) { animation-duration: .62s; animation-timing-function: cubic-bezier(.65, 0, .2, 1); }
::view-transition-old(sol), ::view-transition-new(sol) { height: 100%; width: 100%; object-fit: fill; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; }
::view-transition-old(escena) { animation: escena-sale .2s ease-in both; }
::view-transition-new(escena) { animation: escena-entra .42s .16s cubic-bezier(.2, .7, .2, 1) both; }
::view-transition-group(barra), ::view-transition-group(tabs) { animation-duration: .4s; }
@keyframes escena-sale { to { opacity: 0; transform: translateY(-10px); } }
@keyframes escena-entra { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .barra, .tabs, .sol, .sol-propio, .sigue, .vivo { display: none !important; }
  body { background: #fff; color: #000; }
}