en el HTML.) */
.tarjeta__icono {
width: 42px;
height: 42px;
margin-bottom: 1.4rem;
color: var(--terracotta);
transition: transform var(--transicion);
}
.tarjeta__icono svg { width: 100%; height: 100%; display: block; }
.tarjeta:hover .tarjeta__icono { transform: translateY(-2px) scale(1.05); }
/* Vídeo de cabecera de las tarjetas de paquete.
Los vídeos son verticales (828x1108), por eso la proporción 4/5. */
.tarjeta__media {
aspect-ratio: 4 / 5;
margin-bottom: 1.5rem;
border-radius: calc(var(--radio-tarjeta) - 3px);
}
/* La tarjeta con vídeo aprieta un poco el padding para dar aire a la imagen */
.tarjeta--con-media { padding: clamp(1rem, 1.6vw, 1.25rem); }
.tarjeta--con-media h3,
.tarjeta--con-media p { padding-inline: clamp(.5rem, 1vw, .9rem); }
.tarjeta--con-media p:last-child { padding-bottom: clamp(.6rem, 1.2vw, 1rem); }
/* Número de orden discreto */
.tarjeta__numero {
font-family: var(--fuente-titulo);
font-size: .85rem;
letter-spacing: .12em;
color: var(--terracotta);
margin-bottom: .9rem;
}
/* --- Reviews --- */
/* La cita va en terracotta: es el acento de la marca y funciona como
destacado, igual que los titulares de las preguntas frecuentes. */
.review__texto {
font-family: var(--fuente-titulo);
font-size: clamp(1.05rem, 1rem + .4vw, 1.22rem);
line-height: 1.5;
letter-spacing: -.01em;
margin: 0 0 1.6rem;
color: var(--terracotta);
}
.review__autor {
margin-top: auto;
padding-top: 1.2rem;
border-top: 1px solid var(--navy-10);
font-size: .78rem;
letter-spacing: .1em;
text-transform: uppercase;
line-height: 1.6;
}
.review__autor strong { display: block; font-weight: 600; }
.review__autor span { opacity: .68; letter-spacing: .06em; text-transform: none; }
/* Comillas decorativas */
.review__comillas {
font-family: var(--fuente-titulo);
font-size: 3rem;
line-height: .8;
color: var(--sand);
margin-bottom: .8rem;
}
/* --- FAQ --- */
.tarjeta--faq h3 { color: var(--terracotta); }
/* ==========================================================================
10. BLOQUES DE SERVICIOS (imagen + texto alternados)
========================================================================== */
.servicio {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
padding-block: clamp(3rem, 6vw, 5rem);
border-top: 1px solid var(--navy-10);
}
.servicio:first-of-type { border-top: 0; }
/* Alterna el orden en los bloques pares */
.servicio:nth-child(even) .servicio__media { order: 2; }
/* Proporción 3/4: es el formato real de los vídeos (828x1108, verticales) */
.servicio__media {
border-radius: var(--radio-tarjeta);
aspect-ratio: 3 / 4;
box-shadow: var(--sombra-suave);
}
.servicio__numero {
font-family: var(--fuente-titulo);
font-size: .9rem;
letter-spacing: .14em;
color: var(--terracotta);
margin-bottom: 1rem;
}
.servicio h2 { font-size: clamp(1.8rem, 1.35rem + 1.8vw, 2.6rem); }
/* ==========================================================================
11. SECCIÓN CON IMAGEN DE FONDO Y VELO
========================================================================== */
.seccion--imagen {
position: relative;
isolation: isolate;
color: var(--crema);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Velo navy sobre la foto. Sube las opacidades si tu imagen es muy clara y el
texto pierde legibilidad; bájalas si quieres que se vea más la foto. */
.seccion--imagen::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to bottom, rgba(40, 55, 74, .84), rgba(40, 55, 74, .70));
}
.seccion--imagen .eyebrow { color: var(--sand); }
/* --------------------------------------------------------------------------
SECCIÓN CON VÍDEO DE FONDO
--------------------------------------------------------------------------
Igual que .seccion--imagen pero con vídeo. Necesita dentro un
con su imagen y su vídeo.
-------------------------------------------------------------------------- */
.seccion--video {
position: relative;
isolation: isolate;
color: var(--crema);
}
/* Velo navy para que el texto se lea sobre el vídeo.
Sube las opacidades si tu vídeo es claro; bájalas para verlo más. */
.seccion--video::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to bottom, rgba(40, 55, 74, .86), rgba(40, 55, 74, .93));
}
.seccion--video .eyebrow { color: var(--sand); }
/* Variante con el velo del hero (más suave arriba a la derecha), para que las
secciones que repiten el vídeo del hero se sientan de la misma familia. */
.seccion--video--hero::before {
background:
linear-gradient(to right, var(--navy-velo-alto) 0%, var(--navy-velo) 55%, rgba(40, 55, 74, .55) 100%),
linear-gradient(to top, rgba(40, 55, 74, .8) 0%, transparent 45%);
}
/* --------------------------------------------------------------------------
KEN BURNS — zoom lentísimo sobre una imagen fija
--------------------------------------------------------------------------
Se usa en el hero de estudio.html: en vez de cargar el vídeo (3,4 MB) se
muestra su primer fotograma (100 KB) con un zoom que da sensación de
movimiento. La página pesa 34 veces menos.
Se anima `transform`, que va por GPU; animar background-size daría tirones.
-------------------------------------------------------------------------- */
/* Zoom + desplazamiento suave. El desplazamiento es lo que hace que el
movimiento se note: solo con zoom, a esta lentitud, casi no se percibe.
La escala nunca baja de 1.05 para que al desplazarse no asome ningún borde.
Para más o menos movimiento, toca la escala final (1.14) o la duración. */
@keyframes ken-burns {
from { transform: scale(1.05) translate3d(-1.5%, -1%, 0); }
to { transform: scale(1.14) translate3d(1.5%, 1%, 0); }
}
.ken-burns {
animation: ken-burns 24s ease-in-out infinite alternate;
transform-origin: center;
will-change: transform; /* lo manda a la GPU: movimiento sin tirones */
}
/* Columnas del proceso */
.paso { padding-top: 1.75rem; border-top: 1px solid var(--sand-40); }
.paso__numero {
font-family: var(--fuente-titulo);
font-size: 2.2rem;
line-height: 1;
color: var(--sand);
margin-bottom: 1rem;
opacity: .85;
}
.paso h3 { margin-bottom: .6rem; }
.paso p { font-size: .97rem; opacity: .88; }
/* ==========================================================================
12. PÁGINA CONTACTO — arco decorativo con monograma
========================================================================== */
.bloque-formulario { text-align: center; }
.bloque-formulario h2 { margin-bottom: .35rem; }
.bloque-formulario .subtitulo {
font-size: 1.05rem;
opacity: .75;
margin-bottom: 2.4rem;
}
/* Medio óvalo terracotta con el monograma centrado */
.arco {
position: relative;
width: min(90%, 460px);
aspect-ratio: 5 / 4;
margin: clamp(3.5rem, 8vw, 6rem) auto 0;
background: var(--terracotta);
border-radius: 50% 50% 0 0 / 62% 62% 0 0;
display: grid;
place-items: center;
overflow: hidden;
}
/* monograma.png trae mucho margen alrededor de la marca y su fondo es
exactamente el terracotta de marca (#754437), así que se funde con el arco:
por eso se coloca grande, sin que se note el borde del cuadrado. */
.arco img {
width: 82%;
max-width: 360px;
height: auto;
object-fit: contain;
transform: translateY(-2%);
}
/* Aro interior sutil dentro del arco */
.arco::before {
content: '';
position: absolute;
inset: 18px;
border: 1px solid var(--sand-40);
border-radius: 50% 50% 0 0 / 62% 62% 0 0;
pointer-events: none;
}
/* Tarjetas de contacto directo: email, teléfono, WhatsApp e Instagram */
.contacto-directo {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--navy-16);
border: 1px solid var(--navy-16);
border-radius: var(--radio-tarjeta);
overflow: hidden;
margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.contacto-directo a {
display: flex;
flex-direction: column;
align-items: center;
background: var(--crema);
padding: 1.9rem 1.25rem;
text-decoration: none;
text-align: center;
transition: background-color var(--transicion), color var(--transicion);
}
.contacto-directo a:hover { background: var(--sand); color: var(--terracotta); }
/* El icono hereda el color del enlace, así cambia solo al pasar el cursor */
.contacto-directo svg {
width: 24px;
height: 24px;
margin-bottom: .9rem;
color: var(--terracotta);
flex: none;
}
.contacto-directo .etiqueta {
display: block;
font-size: .68rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--terracotta);
margin-bottom: .5rem;
}
/* El dato en sí (correo, número): se selecciona con un doble clic para copiar */
.contacto-directo .valor {
font-size: .95rem;
line-height: 1.45;
word-break: break-word;
}
/* ==========================================================================
13. PIE DE PÁGINA
========================================================================== */
/* El fondo lo pone el
que va dentro del pie
(vídeo hero-poster.mp4 con footer-bg.jpg de respaldo). El navy de aquí es
solo el color de seguridad mientras carga. */
.pie {
position: relative;
isolation: isolate;
color: var(--crema);
background: var(--navy);
padding-block: var(--seccion-y) 2.5rem;
text-align: center;
}
/* Velo para que el vídeo quede como textura y el texto se lea */
.pie::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to bottom, rgba(40, 55, 74, .80), rgba(40, 55, 74, .90));
}
.pie h2 { margin-bottom: 1rem; }
.pie .entradilla {
margin: 0 auto 2.4rem;
max-width: 48ch;
opacity: .85;
}
.pie__lema {
margin-top: 2.2rem;
font-size: .74rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--sand);
}
.pie__base {
margin-top: clamp(3.5rem, 7vw, 5rem);
padding-top: 2rem;
border-top: 1px solid rgba(211, 199, 173, .22);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
text-align: left;
}
.pie__copyright { font-size: .82rem; opacity: .7; margin: 0; }
.pie__redes {
display: flex;
align-items: center;
gap: 1.5rem;
}
.pie__redes a {
display: inline-flex;
align-items: center;
gap: .55rem;
text-decoration: none;
font-size: .8rem;
letter-spacing: .06em;
opacity: .82;
transition: opacity var(--transicion), color var(--transicion);
}
.pie__redes a:hover { opacity: 1; color: var(--sand); }
.pie__redes svg { width: 17px; height: 17px; flex: none; }
/* ==========================================================================
14. ANIMACIONES DE APARICIÓN (las activa main.js)
========================================================================== */
/* Estado inicial: invisible y ligeramente desplazado hacia abajo */
.reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity .9s var(--ease), transform .9s var(--ease);
transition-delay: var(--retraso, 0ms);
will-change: opacity, transform;
}
.reveal.visible {
opacity: 1;
transform: none;
}
/* Entrada del hero al cargar la página */
.entrada-hero > * {
opacity: 0;
transform: translateY(22px);
animation: aparecer .95s var(--ease) forwards;
}
.entrada-hero > *:nth-child(1) { animation-delay: .15s; }
.entrada-hero > *:nth-child(2) { animation-delay: .28s; }
.entrada-hero > *:nth-child(3) { animation-delay: .41s; }
.entrada-hero > *:nth-child(4) { animation-delay: .54s; }
.entrada-hero > *:nth-child(5) { animation-delay: .67s; }
@keyframes aparecer {
to { opacity: 1; transform: none; }
}
/* ==========================================================================
15. RESPONSIVE
========================================================================== */
/* --- Tablet --- */
@media (max-width: 1024px) {
.rejilla--4 { grid-template-columns: repeat(2, 1fr); }
.duo { grid-template-columns: 1fr; }
.duo .retrato { order: -1; width: min(100%, 320px); }
/* Las cuatro vías de contacto pasan a dos filas de dos */
.contacto-directo { grid-template-columns: repeat(2, 1fr); }
.servicio { grid-template-columns: 1fr; }
.servicio:nth-child(even) .servicio__media { order: 0; }
/* En una sola columna el vídeo vertical se limita para no comerse la pantalla */
.servicio__media { width: min(100%, 440px); margin-inline: auto; }
}
/* --- Móvil: menú hamburguesa --- */
@media (max-width: 860px) {
:root { --alto-nav: 68px; }
.hamburguesa { display: flex; }
/* La barra siempre con fondo en móvil para que el menú se lea */
.nav {
background: var(--crema-70);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
--nav-color: var(--navy);
}
/* Panel desplegable a pantalla completa */
.nav__menu {
position: fixed;
inset: var(--alto-nav) 0 auto 0;
flex-direction: column;
align-items: flex-start;
gap: 0;
background: var(--crema);
border-bottom: 1px solid var(--navy-10);
padding: 1rem var(--gutter) 2rem;
transform: translateY(-12px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.nav__menu.abierto {
transform: none;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.nav__menu li { width: 100%; }
.nav__enlace {
display: block;
width: 100%;
padding: 1.05rem 0;
font-size: .85rem;
border-bottom: 1px solid var(--navy-10);
}
.nav__enlace::after { display: none; }
.nav__menu li:last-child .nav__enlace { border-bottom: 0; }
.idioma { margin-left: auto; margin-right: .35rem; }
}
/* --- Móvil pequeño --- */
@media (max-width: 640px) {
:root { --seccion-y: clamp(4rem, 14vw, 5.5rem); }
/* En móvil los vídeos SÍ se reproducen, igual que en escritorio.
La imagen de respaldo sigue debajo: se ve mientras el vídeo carga y es lo
que queda si el móvil está en modo de bajo consumo (iOS bloquea el
autoplay en ese caso y no hay forma de forzarlo). */
.rejilla--4,
.rejilla--3 { grid-template-columns: 1fr; }
/* En móvil las vías de contacto se apilan: cada una a lo ancho y bien
grande para acertar con el dedo */
.contacto-directo { grid-template-columns: 1fr; }
/* Alineados a la izquierda, no centrados: así los iconos caen todos en la
misma columna y la lista se lee de un vistazo. Centrarlos dejaría cada
icono en una posición distinta, porque los textos miden distinto. */
.contacto-directo a {
flex-direction: row;
align-items: center;
gap: 1rem;
justify-content: flex-start;
padding: 1.35rem clamp(1.25rem, 6vw, 2rem);
}
.contacto-directo svg { margin-bottom: 0; }
.contacto-directo .etiqueta { margin-bottom: .15rem; }
.contacto-directo a > div { text-align: left; }
.hero { min-height: 92svh; }
.hero__scroll { display: none; }
.grupo-botones .boton { flex: 1 1 100%; justify-content: center; }
.pie__base { flex-direction: column; text-align: center; }
.nav__logo span { font-size: 1rem; }
.nav__interior { gap: 1rem; } /* más aire para el selector de idioma */
}
/* --- Móviles muy estrechos (≤360px) --- */
@media (max-width: 360px) {
/* Ya no cabe el nombre junto al selector ES/EN: se queda solo la marca */
.nav__logo span { display: none; }
}
/* ==========================================================================
16. MOVIMIENTO REDUCIDO — respeta la preferencia del sistema
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1; transform: none; }
.entrada-hero > * { opacity: 1; transform: none; animation: none; }
.tarjeta:hover,
.tarjeta:hover .media__poster,
.tarjeta:hover .media__video,
.servicio:hover .media__poster,
.servicio:hover .media__video { transform: none; }
/* El zoom Ken Burns se desactiva del todo (la regla global lo dejaría
congelado a mitad de camino, ya ampliado). */
.ken-burns { animation: none !important; transform: none !important; }
}
/* ==========================================================================
17. IMPRESIÓN
========================================================================== */
@media print {
.nav, .hero__media, .hero__scroll { display: none !important; }
body { background: #fff; color: #000; }
.reveal { opacity: 1; transform: none; }
}
