/* ==========================================================================
   Hotel Taburiente — hoja de estilo compartida de los formularios web
   Replica los tokens de la web pública (hoteltaburiente.com):
   tipografías Hanken Grotesk + Raleway, verde oscuro #182217, taupe #A79A8C,
   crema #F1EBE5. Sin dependencias.
   ========================================================================== */

:root {
  --verde: #182217;
  --taupe: #a79a8c;
  --crema: #f1ebe5;
  --gris: #434343;
  --marron: #654d42;
  --linea: #e3dedd;
  --blanco: #ffffff;
  --focus: #005fcc;
  --font-sans: 'Hanken Grotesk', 'hanken-grotesk', sans-serif;
  --font-serif: 'Raleway', 'raleway', sans-serif;
  --ancho-lateral: 8.33vw;
}

*, *::before, *::after { box-sizing: border-box; border: 0 solid; }
html { -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; line-height: 1.15; scroll-behavior: smooth; }
body { margin: 0; background: var(--blanco); color: var(--verde); font-family: var(--font-sans); font-size: 1rem; }
h1, h2, h3, h4, p, ul, figure { margin: 0; padding: 0; font: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { vertical-align: bottom; }
button, input, select, textarea { appearance: none; -webkit-appearance: none; background: transparent; border-radius: 0; color: inherit; font: inherit; margin: 0; outline: 0; padding: 0; }
button { cursor: pointer; }
input[type="checkbox"] { appearance: checkbox; -webkit-appearance: checkbox; }
:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
.oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Cabecera (versión "compact" fija de la web) ---------- */
.cab { position: fixed; top: 0; left: 0; right: 0; z-index: 900; background: var(--blanco); display: flex; align-items: center; height: 4.4375rem; padding: 1.125rem 1.5rem; box-shadow: 0 0.0625rem 0 rgba(24, 34, 23, 0.06); }
.cab__burger { width: 3rem; height: 0.875rem; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; background: none; padding: 0; }
.cab__burger span { display: block; width: 100%; height: 0.125rem; background: var(--verde); transition: width 0.4s; }
.cab__burger:hover span:last-child, .cab__burger:focus-visible span:last-child { width: 50%; }
.cab__lang { display: flex; align-items: center; margin-left: 1.5rem; padding-left: 1.5rem; position: relative; font-size: 0.75rem; font-variation-settings: 'wght' 500; letter-spacing: 0.15em; line-height: 0.9375rem; text-transform: uppercase; color: var(--verde); }
.cab__lang::before { content: ''; width: 0.0625rem; height: 1.5rem; background: rgba(24, 34, 23, 0.2); position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.cab__lang svg { width: auto; height: 0.25rem; fill: var(--taupe); margin-left: 0.375rem; }
.cab__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: block; }
.cab__logo img, .cab__logo svg { height: 2.625rem; width: auto; }
.cab__acciones { margin-left: auto; display: flex; align-items: center; }
.cab__link { display: inline-flex; align-items: center; color: var(--verde); font-size: 1rem; font-variation-settings: 'wght' 500; line-height: 0.9375rem; margin-right: 1.5rem; padding: 0.0625rem 0 0.125rem; transition: color 0.3s ease-in-out; }
.cab__link:hover { color: rgba(24, 34, 23, 0.5); }
.cab__link + .cab__link { padding-left: 1.5rem; position: relative; }
.cab__link + .cab__link::before { content: ''; width: 0.0625rem; height: 1.5rem; background: rgba(24, 34, 23, 0.2); position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.cab__link svg { width: auto; height: 0.75rem; fill: currentColor; margin-right: 0.5rem; transform: translateY(0.0625rem); }
.btn-reserva { display: inline-flex; align-items: center; justify-content: center; min-height: 2.1875rem; background: var(--taupe); border: 0.0625rem solid transparent; color: var(--blanco); font-size: 0.75rem; font-variation-settings: 'wght' 500; letter-spacing: 0.15em; padding: 0 1.5rem; text-transform: uppercase; transition: 0.3s ease-in-out; }
.btn-reserva:hover, .btn-reserva:focus-visible { background: transparent; border-color: var(--taupe); color: var(--verde); }

/* Menú desplegable (overlay) con los enlaces de la web */
.menu { position: fixed; inset: 0; z-index: 1000; background: var(--verde); color: var(--blanco); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity 0.4s ease-in-out, visibility 0s 0.4s; }
.menu.abierto { opacity: 1; visibility: visible; transition: opacity 0.4s ease-in-out; }
.menu__cerrar { position: absolute; top: 1.5rem; left: 1.5rem; width: 1.625rem; height: 1.625rem; cursor: pointer; background: none; }
.menu__cerrar::before, .menu__cerrar::after { content: ''; width: 100%; height: 0.125rem; background: var(--blanco); position: absolute; top: 0.6875rem; left: 0; }
.menu__cerrar::before { transform: rotate(45deg); } .menu__cerrar::after { transform: rotate(-45deg); }
.menu__lista { max-width: 80rem; margin: 0 auto; padding: 7rem 3rem 4rem; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2rem 3rem; }
.menu__col { flex: 1 1 14rem; min-width: 13rem; }
.menu__lista a { display: block; font-family: var(--font-serif); font-size: 1.625rem; line-height: 2.5rem; color: var(--blanco); transition: opacity 0.2s; }
.menu__lista a:hover { opacity: 0.5; }
.menu__sub { font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.5; margin: 0 0 0.5rem; line-height: 1rem; }
.menu__col:first-child { padding-top: 1.5rem; }
.menu__lista a.actual { opacity: 0.5; cursor: default; }

/* ---------- Portada: foto a pantalla completa con el título encima (como la portada de la web) ---------- */
.principal { background: var(--blanco); }
.portada { position: relative; min-height: 82vh; min-height: 82svh; display: flex; align-items: flex-end; justify-content: center; padding: 9rem 1.5rem 7.5rem; background: var(--verde); color: var(--blanco); text-align: center; overflow: hidden; }
.portada__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.portada--empleo .portada__foto { object-position: center top; } /* la foto del equipo va encuadrada justa por arriba: no cortar cabezas */
.portada::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.05) 28%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.72) 100%); pointer-events: none; }
.portada__texto { position: relative; z-index: 1; max-width: 48.75rem; margin: 0 auto; }
.portada h1 { color: var(--blanco); font-family: var(--font-serif); font-weight: 400; font-size: 4.5rem; line-height: 4.5rem; padding-bottom: 0.3125rem; text-shadow: 0 0.125rem 1.5rem rgba(0, 0, 0, 0.35); }
.portada h2 { color: var(--blanco); font-size: 0.9375rem; font-variation-settings: 'wght' 500; font-weight: 500; letter-spacing: 0.1em; line-height: 1.125rem; text-transform: uppercase; opacity: 0.95; }
.portada .titulo__intro { color: rgba(255, 255, 255, 0.92); font-variation-settings: 'wght' 300; font-size: 1.125rem; line-height: 1.75rem; max-width: 35.625rem; margin: 1.75rem auto 0; text-shadow: 0 0.0625rem 1rem rgba(0, 0, 0, 0.35); }

/* Cabecera transparente mientras se ve la portada; al hacer scroll vuelve a la barra blanca "compact" */
.cab--transparente { background: transparent; box-shadow: none; }
.cab--transparente .cab__burger span { background: var(--blanco); }
.cab--transparente .cab__lang { color: var(--blanco); } .cab--transparente .cab__lang::before { background: rgba(255, 255, 255, 0.3); } .cab--transparente .cab__lang svg { fill: var(--blanco); }
.cab--transparente .cab__logo img { filter: brightness(0) invert(1); }
.cab--transparente .cab__link { color: var(--blanco); } .cab--transparente .cab__link:hover { color: rgba(255, 255, 255, 0.6); } .cab--transparente .cab__link + .cab__link::before { background: rgba(255, 255, 255, 0.3); }
.cab { transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out; }

/* ---------- Sección del formulario: fondo crema, tarjeta blanca que asoma sobre la portada ---------- */
.seccion-form { background: var(--crema); padding: 0 var(--ancho-lateral) 6rem; position: relative; text-align: center; }
.titulo__intro--movil { display: none; }
.tarjeta { background: var(--blanco); padding: 1rem 7.29vw 5.1875rem; position: relative; z-index: 2; text-align: left; margin-top: -4.5rem; }

/* ---------- Formulario ---------- */
.form { position: relative; }
.form__velo { position: absolute; inset: 0; z-index: 3; background: rgba(255, 255, 255, 0.9); transition: 0.2s; }
.form__velo.oculto { opacity: 0; visibility: hidden; z-index: -1; }
.form__velo::before { content: ''; width: 3rem; height: 3rem; animation: girar 1s infinite linear; border: 0.125rem solid var(--taupe); border-top-color: transparent; border-radius: 100%; margin: -1.5rem 0 0 -1.5rem; position: absolute; top: 50%; left: 50%; }
@keyframes girar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.form__grupo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; margin-top: 2rem; }
.form__titulo { width: 100%; margin-top: 3rem; padding: 0 0.25rem; color: var(--verde); font-size: 0.8125rem; font-variation-settings: 'wght' 500; letter-spacing: 0.2em; line-height: 1rem; text-transform: uppercase; border-bottom: 0.0625rem solid var(--linea); padding-bottom: 0.75rem; }
.form__titulo--primero { margin-top: 1rem; }
.bloque-preguntas .form__titulo { margin-top: 3rem; }
.campo { width: calc(50% - 1.875rem); margin-top: 2rem; padding: 0 0.25rem; position: relative; }
.campo--ancho { width: 100%; }
.campo label, .campo > .etiqueta { display: block; font-size: 0.8125rem; font-variation-settings: 'wght' 500; letter-spacing: 0.2em; line-height: 1rem; margin-bottom: 0.375rem; text-transform: uppercase; }
.campo input:not([type="checkbox"]), .campo select { display: block; width: 100%; max-width: 100%; min-width: 0; height: 2rem; background: transparent; border-bottom: 0.0625rem solid var(--verde); color: var(--verde); font-size: 1rem; font-variation-settings: 'wght' 500; padding: 0; transition: border-color 0.2s; }
.campo input::placeholder { color: var(--verde); opacity: 0.4; }
.campo input:focus::placeholder { opacity: 1; }
.campo input:-webkit-autofill { -webkit-box-shadow: 0 0 0 6.25rem var(--crema) inset; -webkit-text-fill-color: var(--verde); }
.campo select { cursor: pointer; padding-right: 1.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3Cpath fill='%23182217' d='M2 3 0 0h4Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.25rem center; background-size: 0.5rem; }
.campo select:invalid, .campo select.vacio { color: rgba(24, 34, 23, 0.4); }
.campo select option { color: var(--verde); }
.campo input[type="date"] { min-height: 2rem; }
.campo input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; }
.campo textarea { width: 100%; height: 12.5rem; border: 0.0625rem solid var(--verde); color: var(--verde); font-size: 1rem; font-variation-settings: 'wght' 500; line-height: 1.625rem; margin-top: 0.375rem; padding: 1.625rem; resize: none; text-align: left; display: block; }
.campo textarea::placeholder { color: var(--verde); opacity: 0.4; }
.campo textarea:focus::placeholder { opacity: 1; }
.campo .ayuda { display: block; margin-top: 0.5rem; color: var(--gris); font-size: 0.8125rem; font-variation-settings: 'wght' 300; line-height: 1.25rem; }
.campo.error input, .campo.error select, .campo.error textarea, .campo.error .adjunto__caja { border-color: #b3261e; }
.campo .msg-error { display: none; margin-top: 0.375rem; color: #b3261e; font-size: 0.8125rem; line-height: 1.125rem; }
.campo.error .msg-error { display: block; }

/* Adjuntos (input file estilizado) */
.adjunto input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.adjunto__caja { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2rem; border-bottom: 0.0625rem solid var(--verde); cursor: pointer; padding: 0.25rem 0; }
.adjunto__nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; font-variation-settings: 'wght' 500; opacity: 0.4; }
.adjunto__nombre.con-fichero { opacity: 1; }
.adjunto__boton { flex: none; font-size: 0.6875rem; font-variation-settings: 'wght' 500; letter-spacing: 0.15em; text-transform: uppercase; border: 0.0625rem solid var(--verde); padding: 0.375rem 0.75rem; transition: 0.2s; }
.adjunto__caja:hover .adjunto__boton, .adjunto input:focus-visible ~ .adjunto__caja .adjunto__boton { background: var(--verde); color: var(--blanco); }

/* Casillas (checkbox) con el cuadrado de la web */
.casillas { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-top: 0.75rem; }
.casilla, .campo label.casilla { position: relative; display: inline-flex; align-items: flex-start; cursor: pointer; font-size: 0.875rem; font-variation-settings: 'wght' 300; letter-spacing: 0; line-height: 1.625rem; margin-bottom: 0; text-transform: none; color: var(--gris); }
.casilla input { position: absolute; opacity: 0; width: 1px; height: 1px; z-index: -1; }
.casilla span { display: flex; align-items: flex-start; gap: 0.625rem; text-transform: none; letter-spacing: 0; font-size: 0.875rem; line-height: 1.625rem; margin: 0; }
.casilla span::before { content: ''; flex: none; box-sizing: border-box; width: 1rem; height: 1rem; margin-top: 0.3125rem; border: 0.0625rem solid var(--verde); background: transparent; box-shadow: inset 0 0 0 0.5rem var(--blanco); transition: 0.3s cubic-bezier(0, 0.55, 0.45, 1); }
.casilla input:checked ~ span::before { border-color: var(--taupe); background: var(--verde); box-shadow: inset 0 0 0 0.1875rem var(--blanco); }
.casilla input:focus-visible ~ span::before { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
.casilla a { font-variation-settings: 'wght' 500; text-decoration: underline; }

.form__pie { width: 100%; text-align: center; margin-top: 1.5rem; }
.form__privacidad { display: block; max-width: 46rem; margin: 0 auto; text-align: center; }
.form__privacidad .casilla { text-align: left; }
.form__privacidad .msg-error { text-align: center; }
.form__legal { max-width: 46rem; margin: 1.25rem auto 0; color: var(--gris); font-size: 0.75rem; font-variation-settings: 'wght' 300; line-height: 1.25rem; text-align: center; }
.form__legal a { text-decoration: underline; }
.btn-enviar { display: inline-block; height: auto; min-height: 2.1875rem; background: var(--taupe); border: 0.0625rem solid transparent; color: var(--blanco); font-size: 0.75rem; font-variation-settings: 'wght' 500; letter-spacing: 0.15em; margin: 1.5rem auto 0; padding: 0 1.5rem; text-align: center; text-transform: uppercase; transition: 0.3s ease-in-out; cursor: pointer; }
.btn-enviar:hover, .btn-enviar:focus-visible { background: transparent; border-color: var(--taupe); color: var(--verde); }
.btn-enviar:disabled { cursor: not-allowed; pointer-events: none; opacity: 0.6; }
.form__aviso { display: none; margin-top: 1.5rem; padding: 1rem 1.25rem; background: var(--crema); color: var(--verde); font-size: 0.9375rem; line-height: 1.5rem; text-align: center; }
.form__aviso.visible { display: block; }
.form__aviso.error { background: #fbeae9; color: #8a1c15; }

/* Estado de éxito */
.exito { display: none; text-align: center; padding: 3rem 0 1rem; }
.exito.visible { display: block; }
.exito h3 { font-family: var(--font-serif); font-size: 2.25rem; line-height: 2.75rem; color: var(--verde); }
.exito p { color: var(--gris); font-variation-settings: 'wght' 300; font-size: 1.125rem; line-height: 1.75rem; max-width: 35.625rem; margin: 1.25rem auto 0; }
.exito .btn-enviar { margin-top: 2rem; }

/* Campo trampa anti-spam (invisible para personas) */
.trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Pie ---------- */
.pie { background: var(--crema); overflow: hidden; position: relative; color: var(--verde); }
.pie__sup { display: flex; flex-wrap: wrap; align-items: flex-start; padding: 3.75rem 4.17vw; }
.pie__col:nth-of-type(2) { margin-left: auto; }
.pie__dato { display: inline-block; font-family: var(--font-serif); font-weight: 400; font-size: 1.5rem; line-height: 1.875rem; padding-bottom: 0.1875rem; position: relative; }
.pie__dato::after, .pie__enlace::after { content: ''; width: 100%; height: 0.0625rem; background: var(--verde); position: absolute; bottom: 0; left: 0; transform: scaleX(0); transform-origin: right; transition: transform 0.8s cubic-bezier(0.24, 0.43, 0.15, 0.97); }
.pie__dato:hover::after, .pie__enlace:hover::after { transform: scaleX(1); transform-origin: left; }
.pie__sep { margin-top: 0.9375rem; }
.pie__social { margin-top: 3.5rem; margin-left: -0.25rem; display: flex; }
.pie__social a { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; margin-right: 1rem; }
.pie__social svg { width: auto; height: 1rem; fill: var(--verde); transition: 0.2s ease-in-out; }
.pie__social a:hover svg { opacity: 0.4; }
.pie__lista { column-count: 3; column-gap: 1.5rem; }
.pie__lista li { min-width: 11.25rem; margin-bottom: 0.75rem; break-inside: avoid; }
.pie__enlace { display: inline-block; font-size: 0.875rem; font-weight: 500; font-variation-settings: 'wght' 500; letter-spacing: 0.1em; line-height: 1.125rem; text-transform: uppercase; padding-bottom: 0.1875rem; position: relative; }
.pie__inf { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 1.5rem 1.5rem 0; }
.pie__inf .pie__enlace { margin: 0 2rem 0 0; }
.pie__inf .pie__enlace:last-child { margin-right: 0; }
.pie__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 2.5rem; padding: 2.5rem 1.5rem 3rem; }
.pie__logos img { height: 3rem; width: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .cab { height: 3.875rem; padding: 0 1.5rem; }
  .cab__burger { width: 2.25rem; }
  .cab__link--texto, .cab__lang { display: none; }
  .btn-reserva { min-height: 2rem; padding: 0 1rem; font-size: 0.6875rem; }
  .portada { min-height: 100vh; min-height: 100svh; padding: 6.5rem 1.5rem 4rem; }
  .portada__foto { object-position: center 30%; }
  .portada .titulo__intro { display: none; }
  .titulo__intro--movil { display: block; color: var(--gris); font-variation-settings: 'wght' 300; font-size: 1rem; line-height: 1.625rem; padding: 2.25rem 0 0; margin: 0 auto; max-width: 30rem; }
  .portada h1 { font-size: 3rem; line-height: 3rem; hyphens: auto; }
  .portada h2 { font-size: 0.8125rem; line-height: 0.9375rem; letter-spacing: 0.2em; }
  .portada .titulo__intro { max-width: none; font-size: 1rem; line-height: 1.625rem; margin-top: 1.75rem; }
  .seccion-form { padding: 0 1.5rem 3.75rem; }
  .tarjeta { padding: 2.25rem 1.5rem 3.75rem; margin-top: 1.75rem; }
  .form__grupo { margin-top: 0; }
  .campo { width: 100%; margin-top: 1.5rem; }
  .campo textarea { height: 11rem; padding: 1rem; }
  .adjunto__boton { padding: 0.375rem 0.5rem; font-size: 0.625rem; }
  .pregunta .casilla { padding: 0.3125rem 0; }
  .pregunta .casillas { gap: 0; }
  .pie__sup { display: block; padding: 3.75rem 1.5rem; }
  .pie__col:nth-of-type(2) { margin-left: 0; }
  .pie__lista { column-count: 2; column-gap: 0; margin-top: 3.75rem; }
  .pie__lista li { width: 10rem; min-width: 0; }
  .pie__enlace { font-size: 0.8125rem; line-height: 0.9375rem; letter-spacing: 0.2em; }
  .pie__inf { display: block; padding: 1.5rem 1.5rem 0; }
  .pie__inf .pie__enlace { display: block; margin: 0 0 1.3125rem 0; }
  .pie__social { margin-top: 2.8125rem; }
  .menu__lista { padding: 5.5rem 1.5rem 3rem; gap: 1.5rem 2rem; }
  .menu__col:first-child { padding-top: 0; }
  .menu__lista a { font-size: 1.25rem; line-height: 2.125rem; }
}
@media (max-width: 599px) {
  .pie__dato { font-size: 1.25rem; line-height: 1.625rem; overflow-wrap: anywhere; }
  .cab__logo img { height: 2rem; }
  .btn-reserva { min-height: 1.875rem; padding: 0 0.75rem; font-size: 0.625rem; letter-spacing: 0.12em; }
}
@media (max-width: 374px) { .portada h1 { font-size: 2.5rem; line-height: 2.5rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- Preguntas dinámicas por departamento (empleo) ---------- */
.bloque-preguntas { width: 100%; }
.bloque-preguntas .pregunta { margin-top: 2rem; }
.bloque-preguntas .pregunta[hidden] { display: none; }
.pregunta .casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.25rem 1.5rem; margin-top: 0.5rem; }
.pregunta .ayuda { margin: 0.125rem 0 0; }
.casilla input[type="radio"] ~ span::before { border-radius: 50%; }
.bloque-preguntas .form__titulo:first-child { margin-top: 2.5rem; }
@media (max-width: 1199px) { .bloque-preguntas .pregunta { margin-top: 1.5rem; } .pregunta .casillas { grid-template-columns: 1fr; } }

/* ---------- Animaciones (calcadas de la web: título con máscara, cabecera que baja, bloques que suben al entrar) ----------
   Solo se aplican si el navegador no pide "reducir movimiento" y si hay JavaScript (clase .js en <html>):
   sin JS o con movimiento reducido todo se ve directamente, nunca se queda oculto. */
@media (prefers-reduced-motion: no-preference) {
  .js .portada__linea { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.05em 0.1em 0.12em; margin: -0.05em -0.1em -0.12em; }
  .js .portada__linea-in { display: inline-block; opacity: 0; transform: translateY(1.15em); animation: subir-titulo 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards; }
  .js .portada h2 { opacity: 0; transform: translateY(2.8rem); animation: aparecer 1s cubic-bezier(0.22, 1, 0.36, 1) 1s forwards; }
  .js .portada .titulo__intro { opacity: 0; transform: translateY(2.8rem); animation: aparecer 1s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards; }
  .js .portada__foto { opacity: 0; animation: aparecer-foto 1.2s ease-out 0.1s forwards; }
  .js .cab__logo img, .js .cab__burger, .js .cab__lang, .js .cab__acciones { opacity: 0; transform: translateY(-1.5rem); animation: bajar 1s ease-in-out 0.7s forwards; }
  .js .aparece { opacity: 0; transform: translateY(2.8rem); transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1); }
  .js .aparece.visible { opacity: 1; transform: none; }
  .js .menu__lista a, .js .menu__sub { opacity: 0; transform: translateY(1.875rem); transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; }
  .js .menu.abierto .menu__lista a, .js .menu.abierto .menu__sub { opacity: 1; transform: none; }
  @keyframes subir-titulo { to { opacity: 1; transform: none; } }
  @keyframes aparecer { to { opacity: 1; transform: none; } }
  @keyframes aparecer-foto { to { opacity: 1; } }
  @keyframes bajar { to { opacity: 1; transform: none; } }
}