/* Para cambiar las tipografías de títulos y acentos alcanza con --f-titulo y --f-acento */
@font-face { font-family: "Titulos AA"; src: url("../fonts/titulos-condensada.woff2") format("woff2"); font-weight: 300 500; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Acento AA"; src: url("../fonts/acento-script.woff2") format("woff2"); font-display: swap; }

:root {
  /* Paleta del manual de marca */
  --azul: #2b4b77;
  --roto: #eeece6;
  --noche: #0e314f;
  --cielo: #acc6d4;
  --tierra: #49372f;
  --arena: #ece3b2;

  --f-titulo: "Titulos AA", "Times New Roman", serif;
  --f-texto: "Public Sans", system-ui, sans-serif;
  --f-acento: "Acento AA", cursive;

  /* Escala tipográfica: cada tamaño tiene un solo rol */
  --t-portada: min(14.4vw, 23.5svh);
  --t-versos: clamp(3.4rem, 12vw, 12rem);
  --t-seccion: clamp(3rem, 8.2vw, 8rem);
  --t-caso: clamp(2.7rem, 5.6vw, 5.5rem);
  --t-cita: clamp(1.9rem, 3.6vw, 3.4rem);
  --t-item: clamp(1.5rem, 2.2vw, 2rem);
  --t-bajada: 1.125rem;
  --t-cuerpo: 1.0625rem;
  --t-nota: .875rem;

  /* Grilla y ritmo */
  --margen: clamp(1rem, 3.5vw, 3.5rem);
  --aire: clamp(4.5rem, 10vw, 9rem);
  --bloque: clamp(2.5rem, 5vw, 4.5rem);
  --columnas: repeat(12, minmax(0, 1fr));
  --calle: clamp(.75rem, 1.7vw, 1.5rem);
  --medida: 36rem;
  --barra: 4.5rem;

  /* Fondos */
  --arco: clamp(2.5rem, 7vw, 7rem);
  --fundido: clamp(7rem, 14vw, 13rem);
  --atardecer: clamp(13rem, 42vh, 26rem);
  --amanecer: clamp(13rem, 42vh, 26rem);
  /* Fundidos calculados en Oklab dentro de la familia de azules: arrancan y terminan planos, sin bandas.
     El arena no entra: mezclado con azul, su complementario, pasa por un gris verdoso */
  --f-amanecer-dia: #eeece6, #eeece6, #ecebe5, #e7e8e4, #e0e4e2, #d7dfe0, #cdd9dd, #c3d3da, #baced8, #b3cad6, #aec7d5, #acc6d4, #acc6d4;
  --f-tarde: #acc6d4, #abc5d3, #a6c0d0, #9ab5c8, #88a4bb, #718eab, #587799, #405f87, #2c4c75, #1d3e62, #133556, #0f3250, #0e314f;
  --f-aurora: #0e314f, #0f3250, #153657, #214167, #34547c, #4e6d92, #6e8ba9, #8eaac0, #afc5d2, #ced9dd, #e3e6e3, #ecebe6, #eeece6;
  --f-azul-cielo: #2b4b77, #2c4c77, #2f4f7a, #375781, #44648a, #557497, #6987a5, #7d9ab4, #8fabc0, #9eb9ca, #a7c1d1, #abc5d4, #acc6d4;
  --f-cielo-roto: #acc6d4, #acc6d4, #aec7d5, #b3cad6, #baced8, #c3d3da, #cdd9dd, #d7dfe0, #e0e4e2, #e7e8e4, #ecebe5, #eeece6, #eeece6;
  --f-azul-noche: #2b4b77, #2b4b77, #2a4a76, #284873, #25456e, #214269, #1d3e63, #183a5d, #143657, #113453, #0f3250, #0e314f, #0e314f;
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='.2'/%3E%3C/svg%3E");
  --borde-copia: clamp(5px, .55vw, 8px);
  --filete: color-mix(in srgb, currentColor 28%, transparent);
  --vacio: color-mix(in srgb, currentColor 10%, transparent);  /* lugar de un video que todavía no cargó */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--barra); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grano) var(--roto);
  color: var(--azul);
  font: 400 var(--t-cuerpo)/1.6 var(--f-texto);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: 400; }
ul, ol { list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.saltar { position: absolute; left: var(--margen); top: -4rem; z-index: 30; background: var(--azul); color: var(--roto); padding: .5rem 1rem; }
.saltar:focus { top: .5rem; }

/* Voz tipográfica */
.titulo {
  font-family: var(--f-titulo);
  font-size: var(--t-seccion);
  line-height: .98;
  text-transform: uppercase;
  text-wrap: balance;
}
.titulo-caso { font-family: var(--f-titulo); font-size: var(--t-caso); line-height: 1; text-transform: uppercase; }
.titulo-cita { font-family: var(--f-titulo); font-size: var(--t-cita); line-height: 1.08; text-wrap: balance; }
.titulo-item { font-family: var(--f-titulo); font-size: var(--t-item); line-height: 1.12; }
.acento { font-family: var(--f-acento); font-weight: 400; line-height: 1; }
.aparte { font-family: var(--f-titulo); font-size: var(--t-item); line-height: 1.16; text-wrap: pretty; }
.texto { max-width: var(--medida); }
.texto > * + * { margin-top: 1rem; }

/* La idea central: lo que pasa entre paréntesis */
.parentesis { position: relative; display: inline-flex; align-items: center; gap: .03em; white-space: nowrap; }
.oval {
  position: relative;
  display: inline-block;
  width: 1.32em;
  height: .78em;
  margin-inline: .05em;
  border-radius: 50%;
  overflow: hidden;
  vertical-align: -.02em;
}
.oval video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
/* Portada: clips apilados con fundido cruzado, sobre una vista previa diminuta que evita el óvalo vacío */
.oval-portada { background: center / cover no-repeat; }
.oval-portada video { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.oval-portada video.activo { opacity: 1; }
.oval-portada::after {
  content: "";
  position: absolute;
  inset: .035em;
  border: 1.5px solid var(--roto);
  border-radius: 50%;
  pointer-events: none;
}

/* Video en grande: un portal con la forma del monograma */
.portal { position: relative; aspect-ratio: 5 / 8; }
.portal video { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: var(--vacio); }
.portal::after {
  content: "";
  position: absolute;
  inset: clamp(.5rem, 1vw, .85rem);
  border: 1.5px solid var(--roto);
  border-radius: 50%;
  pointer-events: none;
}

/* Copias impresas: el resto de los videos y las fotos.
   Sin rotación: un video inclinado deja los bordes serruchados en el navegador */
.vertical { position: relative; }
.vertical video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--vacio); }
.copia video, .tira > * {
  border: var(--borde-copia) solid var(--roto);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--azul) 22%, transparent);
}
.copias { display: flex; align-items: flex-start; }
.copias > * { flex: 0 0 56%; min-width: 0; }
.copias > * + * { position: relative; z-index: 1; flex-basis: 50%; margin-top: 16%; margin-left: -6%; }

/* Las voces de quienes lo vivieron, entre paréntesis altos como los del monograma */
.voz {
  --parentesis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 100' preserveAspectRatio='none'%3E%3Cpath d='M19 0C3 24 3 76 19 100C7 76 7 24 19 0Z'/%3E%3C/svg%3E");
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: clamp(.7rem, 2vw, 2rem);
  row-gap: .85rem;
}
.voz::before, .voz::after {
  content: "";
  grid-row: 1 / span 2;
  width: clamp(1rem, 2.4vw, 2.4rem);
  background: var(--color-parentesis, currentColor);
  -webkit-mask: var(--parentesis) center / 100% 100% no-repeat;
  mask: var(--parentesis) center / 100% 100% no-repeat;
}
.voz::before { grid-column: 1; }
.voz::after { grid-column: 3; scale: -1 1; }
.voz blockquote { grid-column: 2; font-family: var(--f-titulo); line-height: 1.08; text-wrap: pretty; }
.voz figcaption { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .75rem; font-size: var(--t-nota); }
.voz figcaption .acento { font-size: 2.4rem; }

/* Botón con forma de sticker ovalado de la marca */
.oval-boton {
  position: relative;
  display: inline-block;
  padding: 1em 2.4em;
  border: 0;
  border-radius: 50%;
  background: var(--azul);
  color: var(--roto);
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .2s ease;
}
.oval-boton::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .6;
  pointer-events: none;
}
.oval-boton:hover { transform: rotate(-3deg); }
.en-azul .oval-boton { background: var(--arena); color: var(--noche); }

.sticker {
  position: relative;
  display: inline-block;
  margin-left: .7rem;
  padding: .85em 1.5em;
  border-radius: 50%;
  outline: 1px solid var(--noche);
  background: var(--arena);
  color: var(--noche);
  font: 700 clamp(.72rem, 1.3vw, 1.2rem)/1 var(--f-texto);
  letter-spacing: -.03em;
  text-transform: none;
  white-space: nowrap;
  vertical-align: .55em;
  rotate: 6deg;
}
.sticker::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .55;
}

.enlace {
  padding: 0;
  border: 0;
  background: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  cursor: pointer;
}
.enlace:hover { text-decoration-thickness: 2px; }
.enlaces { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.fecha { font-size: var(--t-bajada); font-weight: 500; }

/* Barra */
.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--barra);
  padding-inline: var(--margen);
  background: var(--grano) var(--roto);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--azul) 16%, transparent);
}
.logo {
  display: block;
  width: 10.5rem;
  aspect-ratio: 1008.48 / 211.6;
  background: var(--azul);
  -webkit-mask: url("../img/logo.svg") center / contain no-repeat;
  mask: url("../img/logo.svg") center / contain no-repeat;
}
.barra-logo { flex: none; }
.navegacion { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.5rem); margin-left: auto; font-size: .95rem; }
.navegacion a:not(.oval-boton) { text-decoration: none; }
.navegacion a:not(.oval-boton):hover { text-decoration: underline; text-underline-offset: .3em; }
.navegacion .oval-boton { padding: .72em 1.6em; font-size: .9rem; }
.navegacion .oval-boton::after { display: none; }
.barra-menu { display: none; }
.pausa {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--azul) 45%, transparent);
  border-radius: 50%;
  background: none;
  color: var(--azul);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.pausa::before { content: ""; width: .6rem; height: .7rem; border-inline: .19rem solid currentColor; }
.pausa[aria-pressed="true"]::before { width: .65rem; height: .75rem; margin-left: .12rem; border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.pausa::after { content: ""; position: absolute; inset: -.3rem; }
@media (hover: hover) {
  .pausa:hover { background: var(--azul); color: var(--roto); }
}

/* Portada */
.portada {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: calc(100svh - var(--barra));
  padding: clamp(1.25rem, 3.5vh, 2.5rem) var(--margen) clamp(1.25rem, 3vh, 2rem);
}
.portada-titulo { font-family: var(--f-titulo); font-size: var(--t-portada); line-height: .95; text-transform: uppercase; }
.linea { display: block; white-space: nowrap; }
.portada-pie { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.portada-pie p { max-width: 36rem; font-size: var(--t-bajada); text-wrap: pretty; }
.portada-pie .oval-boton { flex: none; font-size: 1.1rem; }

/* Secciones sobre una misma grilla de 12 columnas */
.seccion { display: grid; grid-template-columns: var(--columnas); column-gap: var(--calle); padding: var(--aire) var(--margen); }
.seccion > * { grid-column: 1 / -1; }
.en-azul { background: var(--grano) var(--azul); color: var(--roto); --filete: color-mix(in srgb, var(--cielo) 45%, transparent); }

/* Nombre: el óvalo de la marca a escala de página */
.nombre { border-radius: 50% / var(--arco); padding-block: calc(var(--aire) * 1.25); }
.nombre-versos { font-size: var(--t-versos); line-height: .96; text-align: center; }
.nombre-acento { margin-top: -.08em; font-size: clamp(3rem, 8vw, 8rem); color: var(--cielo); text-align: center; rotate: -4deg; }
.nombre-texto { grid-column: 1 / 7; margin-top: var(--aire); }
.nombre-texto h2 { margin-bottom: 1rem; }
.nombre-texto .firma { margin-top: 1.5rem; font-size: 2.6rem; color: var(--arena); }
.voz-julia { grid-column: 8 / -1; align-self: end; margin-top: var(--aire); --color-parentesis: var(--cielo); }
.voz-julia blockquote { font-size: var(--t-item); line-height: 1.14; }
.voz-julia .acento { color: var(--arena); }

/* Desde adentro: texto principal y margen */
.adentro { row-gap: var(--bloque); }
.adentro-titulo { grid-column: 1 / 8; grid-row: 1; }
.adentro-texto { grid-column: 1 / 7; grid-row: 2; }
.adentro-texto h3 { margin-top: 2.25rem; }
.modalidades { margin-top: .5rem; }
.modalidades li { padding-block: .7rem; border-bottom: 1px solid var(--filete); }
.adentro-margen { grid-column: 8 / -1; grid-row: 1 / span 2; align-self: start; display: grid; gap: var(--bloque); }

/* Bodas: de la hoja al cielo */
.dia { row-gap: var(--bloque); padding-top: calc(var(--aire) * 1.4); background: var(--grano), linear-gradient(var(--f-amanecer-dia)) top / 100% var(--fundido) no-repeat, var(--cielo); color: var(--noche); }
.momentos { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin-top: 1.5rem; }
.momentos li { padding: .3em 1em; border: 1px solid currentColor; border-radius: 50%; rotate: -2deg; }
.momentos li:nth-child(even) { rotate: 1.5deg; }
.dia-portal { grid-column: 1 / 7; grid-row: 2; justify-self: center; width: min(100%, 33rem, 52svh); }
.dia-texto { grid-column: 7 / -1; grid-row: 2; align-self: center; display: grid; gap: 1.1rem; }
.voz-flor { --color-parentesis: var(--azul); }
.voz-flor blockquote { font-size: var(--t-seccion); line-height: 1; }

/* Bodas: atardecer, noche y amanecer en un solo recorrido */
.noche {
  padding-block: var(--atardecer) var(--amanecer);
  background:
    var(--grano),
    linear-gradient(var(--f-tarde)) top / 100% var(--atardecer) no-repeat,
    linear-gradient(var(--f-aurora)) bottom / 100% var(--amanecer) no-repeat,
    var(--noche);
  color: var(--roto);
}
.noche-cabecera { grid-column: 1 / 7; display: grid; gap: 1.1rem; }
.horas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 4vw, 4rem); margin-top: var(--bloque); }
.hora:nth-child(2) { margin-top: 7rem; }
.hora:nth-child(3) { margin-top: 14rem; }
.hora-numero { position: relative; z-index: 1; margin-bottom: -.14em; color: var(--arena); font-family: var(--f-titulo); font-size: clamp(3.6rem, 8.4vw, 8.2rem); line-height: 1; text-shadow: 0 .02em .16em color-mix(in srgb, var(--noche) 60%, transparent); }
.noche-aparte { max-width: 22rem; margin-top: 2.5rem; color: var(--cielo); }
.voz-neri { width: min(100%, 62rem); margin: var(--aire) auto 0; --color-parentesis: var(--arena); }
.voz-neri blockquote { font-size: var(--t-cita); }
.voz-neri .acento { color: var(--arena); }
.tira {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin: var(--bloque) calc(var(--margen) * -1) 0;
  padding: 1.25rem var(--margen) 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--margen);
  scrollbar-color: var(--cielo) transparent;
  scrollbar-width: thin;
}
.tira > * {
  flex: none;
  width: auto;
  height: min(62svh, 34rem);
  aspect-ratio: 9 / 16;
  object-fit: cover;
  scroll-snap-align: start;
  background: var(--vacio);
}
.tira > :nth-child(even) { margin-top: 1.75rem; }

/* Secciones claras tras un fundido: se superponen 1px para tapar la fila que el navegador redondea */
.eventos, .preguntas { position: relative; margin-top: -1px; background: var(--grano) var(--roto); }

/* Otros eventos */
.eventos { row-gap: var(--bloque); }
.eventos-lista { grid-column: 1 / 9; grid-row: 1; }
.eventos-texto { grid-column: 1 / 7; grid-row: 2; align-self: end; display: grid; gap: 1rem; }
.eventos-clip { grid-column: 9 / -1; grid-row: 1 / span 2; }

/* Servicios */
.servicios, .reservar { border-radius: 50% 50% 0 0 / var(--arco) var(--arco) 0 0; padding-top: calc(var(--aire) * 1.25); }
.servicios-intro { grid-column: 1 / 7; margin-top: 1.5rem; }
.servicios-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem clamp(1.5rem, 3vw, 3rem); margin-top: var(--bloque); }
.servicios-lista > div { padding-top: 1rem; border-top: 1px solid var(--filete); }
.servicios-lista dd { margin-top: .5rem; }
.servicios-aparte { grid-column: 7 / -1; margin-top: var(--bloque); color: var(--cielo); }

/* Proceso: una escalera, el tiempo baja de izquierda a derecha */
.proceso { padding-block: calc(var(--aire) * 1.5); background:
    var(--grano),
    linear-gradient(var(--f-azul-cielo)) top / 100% var(--fundido) no-repeat,
    linear-gradient(var(--f-cielo-roto)) bottom / 100% var(--fundido) no-repeat,
    var(--cielo);
  color: var(--noche);
}
.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2.5rem); margin-top: var(--bloque); }
.pasos li:nth-child(2) { margin-top: 3.5rem; }
.pasos li:nth-child(3) { margin-top: 7rem; }
.pasos li:nth-child(4) { margin-top: 10.5rem; }
.paso-numero { display: block; font-family: var(--f-titulo); font-size: var(--t-caso); line-height: 1; }
.pasos h3 { margin-top: .5rem; }
.paso-bajada { margin-block: .35rem .75rem; font-weight: 600; line-height: 1.35; }

/* Preguntas */
.preguntas { row-gap: var(--bloque); }
.preguntas .titulo { grid-column: 1 / 6; align-self: start; }
.preguntas-lista { grid-column: 6 / -1; }
details { border-bottom: 1px solid var(--filete); }
summary { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: 1.1rem; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; }
details[open] summary::after { content: "\2212"; }
details p { max-width: var(--medida); padding-bottom: 1.4rem; }
.preguntas-lista .enlace { display: inline-block; margin-top: 2rem; }

/* Reservar */
.reservar { row-gap: var(--bloque); }
.junto { white-space: nowrap; }
.reservar-contacto { grid-column: 1 / 5; }
.contacto { margin-top: 1.5rem; display: grid; gap: .5rem; }
.formulario { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem var(--calle); }
.formulario label, .formulario legend { font-size: .95rem; font-weight: 500; }
.formulario > label { display: grid; gap: .35rem; align-content: start; }
.ancho { grid-column: 1 / -1; }
input:not([type="radio"]), select, textarea {
  width: 100%;
  min-height: 3rem;
  padding: .6rem .1rem;
  border: 0;
  border-bottom: 1px solid var(--cielo);
  border-radius: 0;
  background: transparent;
  color: var(--roto);
  font-weight: 400;
  color-scheme: dark;
}
select option { color: var(--noche); background: var(--roto); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--arena); outline-offset: 2px; }
[aria-invalid="true"] { border-bottom: 2px solid var(--arena); }
textarea { resize: vertical; }
fieldset { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; align-content: start; margin: 0; padding: 0; border: 0; }
fieldset legend { padding: 0; margin-bottom: .55rem; }
fieldset label { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.4rem; font-weight: 400; }
input[type="radio"] { width: 1.15rem; height: 1.15rem; accent-color: var(--arena); }
.formulario-nota { font-size: var(--t-nota); color: var(--cielo); }
.formulario-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.formulario-error { color: var(--arena); font-weight: 600; }

/* Pie: del azul a la noche */
.pie { padding: var(--aire) var(--margen) 2rem; background: var(--grano), linear-gradient(var(--f-azul-noche)) top / 100% var(--fundido) no-repeat, var(--noche); color: var(--roto); }
.pie-frase { font-family: var(--f-titulo); font-size: var(--t-cita); line-height: 1.08; text-align: center; text-transform: uppercase; }
.pie-acento { margin: .35rem 0 var(--aire); font-size: clamp(2rem, 4vw, 3.6rem); color: var(--arena); text-align: center; rotate: -3deg; }
.pie-logo { width: 100%; height: auto; }
.pie-datos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; margin-top: 3rem; font-size: var(--t-nota); }
.firma-innova { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; text-decoration: none; }
.firma-innova img { width: auto; height: 1.05rem; }
.firma-innova:hover span { text-decoration: underline; text-underline-offset: .25em; }

@media (min-width: 1081px) {
  .barra.portada-visible .navegacion .oval-boton { display: none; }
}

@media (max-width: 1080px) {
  .barra-menu { display: block; order: 2; min-height: 2.75rem; padding: 0 .25rem; border: 0; background: none; font-weight: 500; cursor: pointer; }
  .pausa { order: 1; margin-left: auto; }
  .navegacion {
    position: absolute;
    inset: 100% 0 auto 0;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    margin: 0;
    padding: 1rem var(--margen) 2rem;
    background: var(--grano) var(--roto);
    font-family: var(--f-titulo);
    font-size: 2.3rem;
    line-height: 1.2;
    box-shadow: 0 1px 0 var(--azul);
  }
  .navegacion.abierta { display: flex; }
  .navegacion .oval-boton { margin-top: 1rem; padding: 1em 2.4em; font-family: var(--f-texto); font-size: 1rem; }
  .servicios-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos li:nth-child(n) { margin-top: 0; }
  .pasos li:nth-child(even) { margin-top: 3rem; }
}

@media (max-width: 720px) {
  :root { --t-cuerpo: 1rem; --t-bajada: 1.0625rem; --bloque: 2.5rem; }
  .logo { width: 8.5rem; }
  .portada { justify-content: flex-start; gap: 2.25rem; min-height: 0; padding-block: 1rem 3rem; }
  .portada-titulo { font-size: 16.6vw; line-height: 1; }
  .portada-titulo .linea:nth-child(2) { white-space: normal; }
  .portada-titulo .parentesis { display: flex; width: 100%; margin-block: .08em; }
  .oval { width: 1.7em; height: 1em; }
  .oval-portada { flex: 1; width: auto; height: 2.1em; min-width: 0; }
  .portada-pie { flex-direction: column; align-items: flex-start; gap: 1.25rem; }

  .nombre-texto, .voz-julia, .adentro-titulo, .adentro-texto, .adentro-margen,
  .dia-portal, .dia-texto, .noche-cabecera,
  .eventos-lista, .eventos-texto, .eventos-clip,
  .servicios-intro, .servicios-aparte,
  .preguntas .titulo, .preguntas-lista,
  .reservar-contacto, .formulario { grid-column: 1 / -1; grid-row: auto; }

  .voz-julia { margin-top: var(--bloque); }
  .dia-portal { width: min(100%, 24rem); }
  .eventos-clip { width: 66%; margin-left: auto; }

  .horas { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hora:nth-child(n) { width: 78%; margin-top: 0; }
  .hora:nth-child(2) { margin-left: auto; }
  .hora-numero { font-size: 5.25rem; }
  .noche-aparte { max-width: none; }
  .tira > * { height: 25rem; }

  .servicios-lista { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .pasos { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .pasos li:nth-child(n) { margin-top: 0; }
  .formulario { grid-template-columns: minmax(0, 1fr); }
  .formulario-acciones { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .oval-boton, .pausa, .oval-portada video { transition: none; }
  .oval-boton:hover { transform: none; }
}