/* ==========================================================================
ORDEVION — Hoja de estilos única para las 5 páginas
--------------------------------------------------------------------------
PARA CAMBIAR COLORES O TAMAÑOS: todo está en el bloque :root de aquí abajo.
No hay ningún color escrito a mano en el resto del archivo.
Los textos, el correo y los enlaces NO están aquí: están en guion.js
========================================================================== */
/* --------------------------------------------------------------------------
1. TIPOGRAFÍAS (descargadas en la carpeta tipos/, no se cargan de internet,
por eso esta web no necesita aviso de cookies)
-------------------------------------------------------------------------- */
@font-face {
font-family: 'Archivo';
src: url('tipos/archivo-latin.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Archivo';
src: url('tipos/archivo-latin-ext.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Public Sans';
src: url('tipos/public-sans-latin.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Public Sans';
src: url('tipos/public-sans-latin-ext.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* --------------------------------------------------------------------------
2. COLORES Y MEDIDAS ← esto es lo que se toca para cambiar el aspecto
-------------------------------------------------------------------------- */
:root {
/* Paleta — sacada del propio logo, color por color, para que la web y la
marca sean exactamente lo mismo. */
--petroleo: #12312D; /* fondo de las secciones oscuras */
--petroleo-hondo: #0A211F; /* EL VERDE EXACTO DEL LOGO: cabecera, portada y pie */
--arena: #EDE6D9; /* el hueso del logo: fondo de las secciones de leer */
--arena-suave: #F5F0E6; /* variante clara para alternar dentro de arena */
--blanco: #FFFFFF;
--ambar: #D18F3C; /* el ámbar del punto del logo: BOTONES Y ACENTOS */
--ambar-vivo: #E7A64F; /* el ámbar al pasar el ratón */
--ambar-texto: #8D5615; /* ámbar OSCURO: el único que se lee bien
cuando es texto sobre fondo claro */
--piedra-clara: #A9C0BC; /* el gris del logo */ /* texto secundario SOBRE fondo oscuro */
--piedra-oscura: #46615C; /* texto secundario SOBRE fondo claro */
/* Líneas y sombras derivadas de la paleta */
--linea-en-oscuro: rgba(169, 192, 188, 0.22);
--linea-en-claro: rgba(10, 33, 31, 0.16);
--sombra-suave: 0 2px 6px rgba(10, 33, 31, 0.06), 0 12px 28px rgba(10, 33, 31, 0.10);
--sombra-alta: 0 4px 10px rgba(10, 33, 31, 0.10), 0 22px 48px rgba(10, 33, 31, 0.16);
/* Tipografías */
--titulos: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
--texto: 'Public Sans', 'Helvetica Neue', Arial, sans-serif;
/* Medidas */
--ancho-maximo: 1180px;
--ancho-lectura: 62ch; /* medida cómoda de lectura */
--margen-lateral: clamp(1.25rem, 5vw, 4rem);
--aire-seccion: clamp(4.5rem, 10vw, 9rem);
--radio: 4px; /* esquinas: casi rectas, tono serio */
--curva: cubic-bezier(0.16, 1, 0.3, 1); /* frenada suave: para lo que entra */
--curva-recorrido: cubic-bezier(0.77, 0, 0.175, 1); /* arranca y frena: para lo que se desplaza */
}
/* --------------------------------------------------------------------------
3. BASE
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
/* Deja hueco por debajo de la cabecera fija al saltar con un enlace interno */
scroll-padding-top: 6rem;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--arena);
color: var(--petroleo);
font-family: var(--texto);
font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.14rem);
line-height: 1.65;
font-weight: 400;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
/* Detalles del navegador que también son diseño */
::selection { background: var(--ambar); color: var(--petroleo-hondo); }
:root { accent-color: var(--ambar); caret-color: var(--ambar); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--arena); }
::-webkit-scrollbar-thumb {
background: var(--piedra-oscura);
border: 3px solid var(--arena);
border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--petroleo); }
:focus-visible {
outline: 2px solid var(--ambar);
outline-offset: 3px;
border-radius: 2px;
}
/* --------------------------------------------------------------------------
4. TIPOGRAFÍA
-------------------------------------------------------------------------- */
h1, h2, h3, h4 {
font-family: var(--titulos);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.04;
margin: 0 0 0.6em;
text-wrap: balance;
}
h1 { font-size: clamp(2.7rem, 1.5rem + 5.4vw, 5.4rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.4rem); }
h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); letter-spacing: -0.02em; }
h4 { font-size: 1.08rem; letter-spacing: -0.01em; }
p { margin: 0 0 1.15em; max-width: var(--ancho-lectura); }
p:last-child { margin-bottom: 0; }
.entrada { /* párrafo grande de entrada de sección */
font-size: clamp(1.16rem, 1.05rem + 0.6vw, 1.42rem);
line-height: 1.55;
color: var(--piedra-oscura);
max-width: 46ch;
}
.oscuro .entrada,
.portada .entrada,
.cabecera-pagina .entrada { color: var(--piedra-clara); }
a { color: inherit; }
/* Palabra destacada dentro de un titular. Se usa así:
Todo lo que tiene un patrón se puede automatizar
*/
.destaca { font-style: normal; color: var(--ambar); }
/* Filete corto encima de los titulares de sección: marca dónde empieza cada
bloque sin necesidad de poner una etiqueta de texto encima. */
.encabezado h2::before,
.titulo-con-filete::before {
content: '';
display: block;
width: 46px;
height: 4px;
background: var(--ambar);
border-radius: 99px;
margin-bottom: clamp(1rem, 2vw, 1.4rem);
}
/* Lema grande bajo el título de una página */
.lema-pagina {
font-family: var(--titulos);
font-weight: 700;
font-size: clamp(1.5rem, 1.1rem + 2vw, 2.6rem);
line-height: 1.15;
letter-spacing: -0.03em;
color: var(--ambar);
margin: 0 0 clamp(1.2rem, 2.5vw, 1.8rem);
max-width: 18ch;
}
/* --------------------------------------------------------------------------
5. ESTRUCTURA DE SECCIONES (alternan oscuro y claro)
-------------------------------------------------------------------------- */
.envoltorio {
width: 100%;
max-width: var(--ancho-maximo);
margin-inline: auto;
padding-inline: var(--margen-lateral);
}
section { padding-block: var(--aire-seccion); position: relative; }
.oscuro { background: var(--petroleo); color: var(--arena); }
.claro { background: var(--arena); color: var(--petroleo); }
.claro-suave { background: var(--arena-suave); color: var(--petroleo); }
/* En fondo claro, el ámbar de los botones no tiene contraste suficiente como
texto (2,3:1 frente al 4,5:1 que hace falta). Ahí se usa el ámbar oscuro.
Esto vale para toda la web de golpe, no hay que acordarse en cada sitio. */
.claro, .claro-suave, .cambio, .caso, .motivos {
--ambar: var(--ambar-texto);
}
/* Excepción: una ficha de caso dentro de una sección oscura sigue siendo
oscura, así que ahí vuelve el ámbar claro. */
.oscuro .caso { --ambar: #D08C2E; }
/* ...menos en los botones, que llevan el ámbar de verdad como fondo */
.claro .boton, .claro-suave .boton, .cambio .boton, .caso .boton {
background: #D08C2E;
}
.claro .boton:hover, .claro-suave .boton:hover { background: var(--ambar-vivo); }
.claro .boton.contorno, .claro-suave .boton.contorno { background: transparent; }
.claro .boton.contorno:hover, .claro-suave .boton.contorno:hover { background: rgba(10, 33, 31, 0.06); }
/* Filete fino que separa dos secciones del mismo tono */
.claro + .claro-suave, .claro-suave + .claro { border-top: 1px solid var(--linea-en-claro); }
/* Enlace para saltar el menú e ir directo al contenido. Solo se ve al llegar
a él con el tabulador, que es cuando hace falta. */
.saltar {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -120%);
z-index: 100;
background: var(--ambar);
color: var(--petroleo-hondo);
font-family: var(--titulos);
font-weight: 700;
font-size: 0.95rem;
padding: 0.8rem 1.4rem;
border-radius: 0 0 var(--radio) var(--radio);
text-decoration: none;
transition: transform 0.25s var(--curva);
}
.saltar:focus { transform: translate(-50%, 0); }
/* --------------------------------------------------------------------------
6. CABECERA Y NAVEGACIÓN
-------------------------------------------------------------------------- */
.cabecera {
position: fixed;
inset: 0 0 auto 0;
z-index: 50;
padding-block: 0.9rem;
background: transparent;
/* Solo se anima el color y la sombra. El alto se queda quieto a propósito:
animar el relleno obliga al navegador a recalcular la maqueta y da tirones. */
transition: background 0.4s var(--curva), box-shadow 0.4s var(--curva),
border-color 0.4s var(--curva);
border-bottom: 1px solid transparent;
}
/* Al bajar, la cabecera se vuelve sólida */
.cabecera[data-fija='si'] {
background: var(--petroleo-hondo);
border-bottom-color: var(--linea-en-oscuro);
box-shadow: 0 8px 24px rgba(10, 33, 31, 0.28);
}
.cabecera .envoltorio {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.marca {
font-family: var(--titulos);
font-weight: 800;
font-size: 1.16rem;
letter-spacing: 0.14em;
text-decoration: none;
color: var(--arena);
display: inline-flex;
align-items: center;
gap: 0.6rem;
}
/* El aro del logo, dibujado en SVG para que se vea nítido a cualquier tamaño */
.marca .isotipo { width: 26px; height: 26px; flex: none; overflow: visible; }
.marca .isotipo .aro { stroke: var(--arena); }
.marca .isotipo .punto {
fill: var(--ambar);
transform-origin: 120px 24px;
transition: transform 0.6s var(--curva);
}
@media (hover: hover) and (pointer: fine) {
.marca:hover .isotipo .punto { transform: scale(1.35); }
}
.menu { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem); }
.menu a {
/* Que no se parta en dos líneas aunque vaya justo de sitio */
white-space: nowrap;
font-size: 0.95rem;
font-weight: 500;
color: var(--piedra-clara);
text-decoration: none;
/* Altura suficiente para pulsarlo bien: la norma pide 24 px */
min-height: 24px;
display: inline-flex;
align-items: center;
padding-block: 0.4rem;
position: relative;
transition: color 0.25s ease;
}
.menu a:hover { color: var(--arena); }
/* Subrayado que crece desde la izquierda */
.menu a::after {
content: '';
position: absolute;
left: 0; bottom: 0;
height: 2px; width: 100%;
background: var(--ambar);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.45s var(--curva);
}
@media (hover: hover) and (pointer: fine) {
.menu a:hover::after { transform: scaleX(1); }
}
.menu a[aria-current='page'] { color: var(--arena); }
/* El botón del menú manda sobre el color gris de los enlaces: si no, el texto
sale apagado encima del ámbar y casi no se lee. */
.menu a.boton { color: var(--petroleo-hondo); }
.menu a.boton::after { content: none; }
/* El de contorno va sobre fondo oscuro: ahí el texto tiene que ser claro.
Sin esto heredaría el verde de la regla de arriba y no se leería.
El borde va en ámbar, a juego con el botón de al lado. El texto NO: en ámbar
sobre oscuro se leería peor. */
.menu a.boton.contorno { color: var(--arena); border-color: var(--ambar); }
@media (hover: hover) and (pointer: fine) {
.menu a.boton.contorno:hover {
background: rgba(209, 143, 60, 0.14);
border-color: var(--ambar-vivo);
}
}
/* Los dos botones van en su propio grupo: así los enlaces del menú pueden
respirar sin que los botones se separen entre ellos. */
.acciones-menu { display: flex; align-items: center; gap: 0.55rem; }
/* En la cabecera los botones van más pequeños que los del cuerpo, y el grupo
se separa del último enlace para que se vea que es otra cosa.
La cabecera se ensancha hasta 1360 (el resto de la web sigue en 1180): con
seis enlaces y dos botones, en 1180 los botones se salían y se cortaban. */
@media (min-width: 1301px) {
.cabecera .envoltorio { max-width: min(100%, 1360px); }
.menu { gap: clamp(1rem, 1.7vw, 1.6rem); }
.menu a { font-size: 0.92rem; }
.menu .boton { padding: 0.6rem 0.95rem; font-size: 0.88rem; gap: 0.4rem; }
.acciones-menu { margin-left: 0.4rem; }
}
.menu a[aria-current='page']::after { transform: scaleX(1); }
/* Botón para abrir el menú en móvil */
.abrir-menu {
display: none;
background: none;
border: 1px solid var(--linea-en-oscuro);
border-radius: var(--radio);
color: var(--arena);
padding: 0.5rem 0.7rem;
cursor: pointer;
font-family: var(--titulos);
font-size: 0.85rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
@media (max-width: 1300px) {
.abrir-menu { display: block; }
.menu {
position: fixed;
inset: 0 0 0 auto;
width: min(19rem, 84vw);
background: var(--petroleo-hondo);
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 1.4rem;
padding: 2.5rem var(--margen-lateral);
transform: translateX(100%);
transition: transform 0.45s var(--curva);
box-shadow: -20px 0 50px rgba(10, 33, 31, 0.4);
}
.menu[data-abierto='si'] { transform: translateX(0); }
.menu a { font-size: 1.24rem; font-family: var(--titulos); color: var(--arena); }
/* En el panel del móvil los dos botones van a lo ancho, uno debajo de otro */
.acciones-menu {
flex-direction: column;
align-items: stretch;
width: 100%;
gap: 0.7rem;
margin-top: 0.6rem;
}
.menu .boton { justify-content: center; }
}
/* --------------------------------------------------------------------------
7. BOTONES
-------------------------------------------------------------------------- */
.boton {
--relleno: var(--ambar);
display: inline-flex;
align-items: center;
gap: 0.7rem;
padding: 0.95rem 1.5rem;
background: var(--relleno);
color: var(--petroleo-hondo);
font-family: var(--titulos);
font-weight: 700;
font-size: 0.98rem;
letter-spacing: 0.01em;
text-decoration: none;
border: none;
border-radius: var(--radio);
cursor: pointer;
position: relative;
overflow: hidden;
/* El hover tiene que ser casi imperceptible: rápido y sutil */
transition: transform 0.18s var(--curva), box-shadow 0.18s var(--curva),
background 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
.boton:hover { background: var(--ambar-vivo); transform: translateY(-2px); box-shadow: var(--sombra-alta); }
}
.boton:active { transform: translateY(0); }
.boton .flecha { transition: transform 0.2s var(--curva); flex: none; }
@media (hover: hover) and (pointer: fine) {
.boton:hover .flecha { transform: translateX(5px); }
}
/* Botón secundario: solo contorno */
.boton.contorno {
background: transparent;
border: 1px solid var(--linea-en-oscuro);
color: var(--arena);
}
.boton.contorno:hover { background: rgba(169, 192, 188, 0.1); border-color: var(--piedra-clara); box-shadow: none; }
.claro .boton.contorno, .claro-suave .boton.contorno {
border-color: var(--linea-en-claro);
color: var(--petroleo);
}
.claro .boton.contorno:hover, .claro-suave .boton.contorno:hover { background: rgba(10, 33, 31, 0.06); }
/* El botón de pedir llamada lleva el borde en ámbar, a juego con el "Escríbenos"
que tiene al lado. Va por el enlace (#llamada), así que vale tanto para el de
la cabecera como para los del final de cada página, y NO toca los botones de
navegación como "Ver web y Google".
En las secciones claras --ambar ya vale ámbar oscuro, así que ahí el borde se
ve sin necesidad de tocar nada más. */
.boton.contorno[href*="#llamada"] { border-color: var(--ambar); }
@media (hover: hover) and (pointer: fine) {
.boton.contorno[href*="#llamada"]:hover { border-color: var(--ambar-vivo); }
.claro .boton.contorno[href*="#llamada"]:hover,
.claro-suave .boton.contorno[href*="#llamada"]:hover { border-color: var(--ambar); }
}
/* --------------------------------------------------------------------------
FOTOS (tarjetas NFC)
Las tres fotos de la página de NFC. Para cambiar una, basta con sustituir
el archivo en imagenes/ manteniendo la proporción (4:3) y el nombre.
-------------------------------------------------------------------------- */
.fotos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
gap: clamp(1rem, 2.4vw, 1.8rem);
margin-top: clamp(2rem, 5vw, 3rem);
}
.fotos figure { margin: 0; }
.foto img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--radio);
border: 1px solid var(--linea-en-claro);
}
.oscuro .foto img { border-color: var(--linea-en-oscuro); }
.fotos figcaption {
margin-top: 0.7rem;
font-size: 0.92rem;
color: var(--piedra-oscura);
}
.oscuro .fotos figcaption { color: var(--piedra-clara); }
/* Enlace de texto con flecha */
.enlace-flecha {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--titulos);
font-weight: 600;
font-size: 1rem;
color: var(--ambar);
text-decoration: none;
padding-bottom: 2px;
border-bottom: 1px solid transparent;
transition: border-color 0.3s ease;
}
.enlace-flecha svg { transition: transform 0.2s var(--curva); }
.enlace-flecha:hover { border-bottom-color: var(--ambar); }
@media (hover: hover) and (pointer: fine) {
.enlace-flecha:hover svg { transform: translateX(4px); }
}
/* --------------------------------------------------------------------------
8. PORTADA (el momento visual de la web: las filas que se repiten)
-------------------------------------------------------------------------- */
.portada {
/* El mismo verde que el fondo del archivo del logo: así el logo se funde
con la portada y no se ve el recuadro de la imagen. */
background: var(--petroleo-hondo);
color: var(--arena);
padding-top: clamp(8rem, 16vh, 12rem);
padding-bottom: clamp(4.5rem, 9vw, 8rem);
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Dos columnas en pantallas grandes: el mensaje a la izquierda, el panel de
tareas a la derecha. En móvil se apila y el panel queda debajo. */
.portada .envoltorio {
display: grid;
/* Algo más de sitio a la izquierda para que los dos botones quepan en fila */
grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
gap: clamp(2.5rem, 5vw, 4.5rem);
align-items: center;
}
@media (max-width: 980px) {
.portada .envoltorio { grid-template-columns: 1fr; gap: 3rem; }
}
/* Trama muy tenue de fondo, para que el bloque oscuro no sea una masa plana */
.portada::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background-image: repeating-linear-gradient(
to bottom,
rgba(169, 192, 188, 0.055) 0 1px,
transparent 1px 22px
);
mask-image: radial-gradient(ellipse 80% 70% at 30% 45%, #000, transparent 78%);
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 45%, #000, transparent 78%);
pointer-events: none;
}
.portada h1,
.titular-portada {
font-size: clamp(2.7rem, 1.5rem + 5.4vw, 5.4rem);
font-weight: 800;
max-width: 13ch;
margin-bottom: 0.42em;
}
/* El titular de la segunda pantalla no lleva el filete de los demás h2 */
.titular-portada::before { content: none; }
/* El eco de "repetirte": dos copias en ámbar, un poco a la izquierda y por
detrás, que se recogen sobre la palabra y desaparecen. Es el lema contado
con movimiento: lo que se repetía deja de repetirse.
Las copias salen del CSS (atributo data-eco), no del HTML, para que Google,
los lectores de pantalla y el copiar y pegar vean la palabra una sola vez. */
.eco {
display: inline-block;
position: relative;
}
.titular-portada .eco::before,
.titular-portada .eco::after {
content: attr(data-eco);
content: attr(data-eco) / '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
white-space: nowrap;
color: var(--ambar);
opacity: 0;
pointer-events: none;
user-select: none;
}
/* Lo dispara guion.js (apartado 8) cuando la palabra está bien a la vista */
.eco[data-sonar='si']::before {
animation: eco-cerca 0.9s var(--curva-recorrido) 0.15s both;
}
.eco[data-sonar='si']::after {
animation: eco-lejos 0.9s var(--curva-recorrido) 0.15s both;
}
@keyframes eco-cerca {
from { opacity: 0.5; transform: translateX(-0.2em); }
to { opacity: 0; transform: none; }
}
@keyframes eco-lejos {
from { opacity: 0.25; transform: translateX(-0.4em); }
to { opacity: 0; transform: none; }
}
/* Mismo peso que la regla de arriba y escrita después, para que gane */
@media (prefers-reduced-motion: reduce) {
.eco[data-sonar='si']::before,
.eco[data-sonar='si']::after { animation: none; }
}
/* --- PRIMERA PANTALLA: solo el logo -------------------------------------
Ocupa la pantalla entera. Al bajar se desvanece y aparece el titular. */
.portada-logo {
min-height: 100svh;
min-height: 100vh; /* respaldo para navegadores antiguos */
display: grid;
place-items: center;
background: var(--petroleo-hondo);
padding-block: 0;
position: relative;
overflow: hidden;
}
.marca-gigante {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(1.4rem, 3vw, 2.2rem);
padding-inline: var(--margen-lateral);
text-align: center;
}
/* Nombre, raya y lema, juntos: al bajar, el JavaScript desvanece este bloque
mientras el aro viaja por su cuenta hasta la cabecera. */
.marca-texto {
display: flex;
flex-direction: column;
align-items: center;
gap: inherit;
will-change: opacity, transform;
}
.marca-gigante .aro-grande {
width: clamp(58px, 8vw, 92px);
height: auto;
overflow: visible;
}
.marca-gigante .aro-grande .aro { stroke: var(--arena); }
/* El punto da una vuelta al aro y se para arriba. Solo aquí, en la primera
pantalla: se ve una vez por visita. El aro pequeño de la cabecera no se
anima, porque ese sale en todas las páginas y cansaría. */
.marca-gigante .aro-grande .punto {
fill: var(--ambar);
transform-box: view-box;
transform-origin: 120px 120px; /* el centro del aro, no el del punto */
animation: vuelta-al-aro 1.3s var(--curva-recorrido) 0.15s both;
}
@keyframes vuelta-al-aro {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.marca-gigante .nombre {
font-family: var(--titulos);
font-weight: 800;
font-size: clamp(3rem, 1.2rem + 9.5vw, 8.5rem);
line-height: 0.95;
letter-spacing: 0.06em;
color: var(--arena);
margin: 0;
}
/* La raya ámbar del logo, debajo del nombre */
.marca-gigante .filete {
width: min(560px, 76vw);
height: 2px;
background: var(--ambar);
border-radius: 99px;
/* Se dibuja desde el centro justo cuando el punto termina su vuelta */
transform-origin: center;
animation: trazar-filete 0.7s var(--curva) 1.05s both;
}
@keyframes trazar-filete {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.marca-gigante .lema-marca {
font-family: var(--titulos);
font-weight: 600;
font-size: clamp(0.95rem, 0.8rem + 0.9vw, 1.5rem);
letter-spacing: 0.1em;
color: var(--piedra-clara);
margin: 0;
max-width: 30ch;
/* Sube cuando la raya ya está casi dibujada */
animation: subir-lema 0.6s var(--curva) 1.3s both;
}
@keyframes subir-lema {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
/* Pista de que hay que seguir bajando */
.pista-bajar {
position: absolute;
left: 50%;
bottom: clamp(1.8rem, 5vh, 3.5rem);
transform: translateX(-50%);
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
color: var(--piedra-clara);
text-decoration: none;
font-family: var(--titulos);
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
transition: color 0.3s ease;
}
.pista-bajar:hover { color: var(--arena); }
.pista-bajar svg { animation: respirar 2.6s ease-in-out infinite; }
@keyframes respirar {
0%, 100% { transform: translateY(0); opacity: 0.65; }
50% { transform: translateY(7px); opacity: 1; }
}
/* En la primera pantalla sobra el nombre de la cabecera: ya está el logo
gigante debajo. Aparece en cuanto se empieza a bajar. */
body:has(.portada-logo) .cabecera[data-fija='no'] .marca {
opacity: 0;
pointer-events: none;
}
.cabecera .marca { transition: opacity 0.45s var(--curva); }
/* Cuando el aro viaja a la cabecera (DATOS.logoALaCabecera en guion.js):
- el aro grande pasa por encima de la cabecera, para que su fondo no lo tape;
- el nombre de la cabecera lo enciende el JavaScript al ritmo del scroll, así
que aquí se le quita la transición, que lo haría ir con retraso;
- si se abre el menú del móvil a medio viaje, el aro se esconde para no
quedar encima del panel. */
[data-logo-viaja='si'] .marca-gigante .aro-grande {
position: relative;
z-index: 60;
will-change: transform;
}
[data-logo-viaja='si'] .cabecera .marca { transition: none; }
[data-logo-viaja='si'] body:has(.menu[data-abierto='si']) .aro-grande {
visibility: hidden !important;
}
@media (prefers-reduced-motion: reduce) {
.pista-bajar svg { animation: none; }
.marca-gigante .filete,
.marca-gigante .lema-marca { animation: none; }
.marca-texto { opacity: 1 !important; transform: none !important; }
}
/* --- El panel: las tareas de siempre marcándose solas --------------------- */
.panel-tareas {
background: var(--petroleo-hondo);
border: 1px solid var(--linea-en-oscuro);
border-radius: var(--radio);
padding: clamp(1.3rem, 2.4vw, 1.9rem);
box-shadow: var(--sombra-alta);
position: relative;
}
.panel-tareas .titulo-panel {
font-family: var(--titulos);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--piedra-clara);
margin: 0 0 1.1rem;
display: flex;
align-items: center;
gap: 0.6rem;
}
.panel-tareas .titulo-panel::before {
content: '';
width: 7px; height: 7px;
border-radius: 50%;
background: var(--ambar);
flex: none;
animation: latir 2.6s ease-in-out infinite;
}
@keyframes latir {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.panel-tareas ul { list-style: none; margin: 0; padding: 0; }
.panel-tareas li {
display: flex;
align-items: center;
gap: 0.85rem;
padding-block: 0.8rem;
border-bottom: 1px solid var(--linea-en-oscuro);
font-size: 0.99rem;
color: var(--arena);
}
.panel-tareas li:last-child { border-bottom: none; }
/* La casilla que se marca sola */
.panel-tareas .casilla {
width: 19px; height: 19px;
border: 1.5px solid var(--ambar);
border-radius: 3px;
flex: none;
position: relative;
}
.panel-tareas .casilla::after {
content: '';
position: absolute;
left: 4px; top: 8px;
width: 9px; height: 4.5px;
border-left: 2px solid var(--ambar);
border-bottom: 2px solid var(--ambar);
transform: rotate(-45deg) scale(0.4);
transform-origin: center;
opacity: 0;
animation: marcar 8s var(--curva) infinite;
animation-delay: var(--turno, 0s);
}
/* El texto se apaga cuando la tarea ya está hecha */
.panel-tareas li .rotulo-tarea {
animation: apagar 8s var(--curva) infinite;
animation-delay: var(--turno, 0s);
}
@keyframes marcar {
0%, 6% { opacity: 0; transform: rotate(-45deg) scale(0.4); }
14%, 84% { opacity: 1; transform: rotate(-45deg) scale(1); }
92%, 100% { opacity: 0; transform: rotate(-45deg) scale(0.4); }
}
@keyframes apagar {
0%, 6% { color: var(--arena); }
14%, 84% { color: var(--piedra-clara); }
92%, 100% { color: var(--arena); }
}
.panel-tareas .pie-panel {
margin-top: 1.2rem;
padding-top: 1rem;
border-top: 1px solid var(--linea-en-oscuro);
font-family: var(--titulos);
font-weight: 700;
font-size: 0.95rem;
color: var(--ambar);
letter-spacing: 0.01em;
}
@media (prefers-reduced-motion: reduce) {
.panel-tareas .casilla::after { opacity: 1; transform: rotate(-45deg) scale(1); animation: none; }
.panel-tareas li .rotulo-tarea { animation: none; color: var(--piedra-clara); }
.panel-tareas .titulo-panel::before { animation: none; }
}
.portada .bajada {
font-size: clamp(1.16rem, 1rem + 0.9vw, 1.5rem);
line-height: 1.5;
color: var(--piedra-clara);
max-width: 48ch;
margin-bottom: 2.4rem;
}
.portada .bajada strong { color: var(--arena); font-weight: 600; }
.acciones { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.sello-lugar {
margin-top: clamp(2.2rem, 5vw, 3.4rem);
padding-top: 1.3rem;
border-top: 1px solid var(--linea-en-oscuro);
max-width: none;
display: flex;
flex-wrap: wrap;
gap: 0.7rem 1.6rem;
font-size: 0.9rem;
color: var(--piedra-clara);
letter-spacing: 0.02em;
}
.sello-lugar span { display: inline-flex; align-items: center; gap: 0.55rem; }
.sello-lugar .punto-ambar {
width: 6px; height: 6px; border-radius: 50%;
background: var(--ambar); flex: none;
}
/* Cabecera interior: ocupa la pantalla entera, con el título y el eslogan
solos. El contenido de verdad empieza en la siguiente pantalla. */
.cabecera-pagina {
background: var(--petroleo);
color: var(--arena);
min-height: 100svh;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
padding-top: clamp(7rem, 14vh, 9rem);
padding-bottom: clamp(5rem, 12vh, 8rem);
position: relative;
overflow: hidden;
}
.cabecera-pagina h1 {
font-size: clamp(2.8rem, 1.5rem + 5.6vw, 5.6rem);
max-width: 15ch;
margin-bottom: 0.3em;
}
.cabecera-pagina .lema-pagina { max-width: 20ch; }
.cabecera-pagina .entrada { max-width: 46ch; }
/* Trama tenue de fondo, la misma que la portada */
.cabecera-pagina::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background-image: repeating-linear-gradient(
to bottom,
rgba(169, 192, 188, 0.05) 0 1px,
transparent 1px 22px
);
mask-image: radial-gradient(ellipse 75% 70% at 28% 50%, #000, transparent 78%);
-webkit-mask-image: radial-gradient(ellipse 75% 70% at 28% 50%, #000, transparent 78%);
pointer-events: none;
}
.cabecera-pagina .envoltorio { position: relative; z-index: 1; }
/* Encabezado de sección: el título a la izquierda y la entradilla a la
derecha. Así el texto no se queda apelotonado en una esquina de la pantalla
grande. En móvil se apila. */
.encabezado {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
gap: clamp(1.2rem, 4vw, 3.5rem);
align-items: end;
}
.encabezado h2 { margin-bottom: 0; }
.encabezado .entrada { max-width: 44ch; }
/* El aire que separa el encabezado del contenido lo pone el propio encabezado,
y se lo quitamos a lo que venga detrás para que no se sumen los dos. */
.encabezado { margin-bottom: clamp(2rem, 4.5vw, 3.2rem); }
.encabezado + .pasos,
.encabezado + .cambios,
.encabezado + .casos,
.encabezado + .servicios,
.encabezado + .tareas,
.encabezado + .zona-contacto { margin-top: 0; }
@media (max-width: 860px) {
.encabezado { grid-template-columns: 1fr; gap: 1.1rem; align-items: start; }
.encabezado h2 { margin-bottom: 0.2em; }
}
/* --------------------------------------------------------------------------
9. LISTA DE TAREAS REPETIDAS (sección del problema)
-------------------------------------------------------------------------- */
.tareas { list-style: none; margin: 2.4rem 0 0; padding: 0; max-width: 46rem; }
.tareas li {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.05rem 0;
border-bottom: 1px solid var(--linea-en-claro);
font-size: clamp(1.05rem, 1rem + 0.4vw, 1.22rem);
position: relative;
}
.oscuro .tareas li { border-bottom-color: var(--linea-en-oscuro); }
.tareas .repite {
font-family: var(--titulos);
font-weight: 700;
font-size: 0.82rem;
letter-spacing: 0.06em;
color: var(--ambar);
flex: none;
padding-top: 0.35rem;
min-width: 4.6rem;
}
/* Raya que tacha la tarea cuando entra en pantalla.
Va con background y no con una línea suelta, para que también funcione
cuando el texto ocupa dos renglones en el móvil. */
.tareas .texto {
background-image: linear-gradient(var(--ambar), var(--ambar));
background-repeat: no-repeat;
background-position: 0 58%;
background-size: 0% 2px;
transition: background-size 0.8s var(--curva);
transition-delay: var(--espera, 0s);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.tareas li[data-visto='si'] .texto { background-size: 100% 2px; }
/* Lista de tareas sin tachar: para cuando lo que se enumera es un problema
que todavía está ahí, no algo que quitamos de en medio. */
.tareas.sin-tachar .texto { background-image: none; }
.remate-tareas {
margin-top: 2.4rem;
font-family: var(--titulos);
font-weight: 700;
font-size: clamp(1.3rem, 1.1rem + 1.1vw, 2rem);
letter-spacing: -0.02em;
line-height: 1.25;
max-width: 28ch;
}
/* --------------------------------------------------------------------------
10. ENTRADAS DE SERVICIO (filas grandes, no tarjetas)
-------------------------------------------------------------------------- */
.servicios { margin-top: clamp(2.5rem, 6vw, 4rem); }
.servicio {
display: grid;
grid-template-columns: 3.6rem minmax(0, 1fr) minmax(0, 1.05fr);
gap: clamp(1.2rem, 3vw, 3rem);
align-items: start;
padding-block: clamp(2rem, 4vw, 3.2rem);
border-top: 1px solid var(--linea-en-oscuro);
}
.claro .servicio, .claro-suave .servicio { border-top-color: var(--linea-en-claro); }
.servicio:last-child { border-bottom: 1px solid var(--linea-en-oscuro); }
.claro .servicio:last-child, .claro-suave .servicio:last-child { border-bottom-color: var(--linea-en-claro); }
.servicio .icono { color: var(--ambar); }
.servicio .icono svg { width: 40px; height: 40px; }
.servicio h3 { margin-bottom: 0.45em; }
.servicio .detalle { color: var(--piedra-clara); }
.claro .servicio .detalle, .claro-suave .servicio .detalle { color: var(--piedra-oscura); }
.ejemplos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.ejemplos li {
display: flex;
gap: 0.75rem;
align-items: baseline;
font-size: 0.99rem;
line-height: 1.5;
}
.ejemplos li::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--ambar);
flex: none;
transform: translateY(-2px);
}
@media (max-width: 780px) {
.servicio { grid-template-columns: 1fr; gap: 1.1rem; }
.servicio .icono svg { width: 34px; height: 34px; }
}
/* --------------------------------------------------------------------------
10 bis. BLOQUES "HOY / DESPUÉS" (página de lo repetitivo)
-------------------------------------------------------------------------- */
.cambios {
display: grid;
gap: clamp(1.1rem, 2.4vw, 1.7rem);
margin-top: clamp(2.4rem, 5vw, 3.5rem);
}
.cambio {
background: var(--blanco);
/* El color de letra se fija aquí: si no, dentro de una sección oscura la
tarjeta blanca hereda el texto claro y no se lee. */
color: var(--petroleo);
border: 1px solid var(--linea-en-claro);
border-radius: var(--radio);
padding: clamp(1.4rem, 3vw, 2.1rem);
transition: box-shadow 0.22s var(--curva), transform 0.22s var(--curva);
}
@media (hover: hover) and (pointer: fine) {
.cambio:hover { box-shadow: var(--sombra-suave); transform: translateY(-2px); }
}
.cambio h3 { margin-bottom: 1.1rem; }
.par {
display: grid;
grid-template-columns: 1fr 1px 1fr;
gap: clamp(1.1rem, 2.6vw, 2.2rem);
align-items: start;
}
/* La rayita vertical que separa el antes del después.
Cada parte lleva su columna escrita a mano: si no, el navegador las coloca
por orden y se descuadra todo. */
.par::before {
content: '';
grid-column: 2;
grid-row: 1;
align-self: stretch;
background: var(--linea-en-claro);
}
.par .ahora { grid-column: 1; grid-row: 1; }
.par .despues { grid-column: 3; grid-row: 1; }
.par .rotulo {
display: block;
font-family: var(--titulos);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.par .ahora .rotulo { color: var(--piedra-oscura); }
.par .despues .rotulo { color: var(--ambar); }
.par .ahora p { color: var(--piedra-oscura); margin: 0; }
.par .despues p { color: var(--petroleo); font-weight: 500; margin: 0; }
@media (max-width: 700px) {
.par { grid-template-columns: 1fr; gap: 1.1rem; }
.par::before { grid-column: 1; grid-row: 2; height: 1px; align-self: auto; }
.par .ahora { grid-column: 1; grid-row: 1; }
.par .despues { grid-column: 1; grid-row: 3; }
}
/* --------------------------------------------------------------------------
11. PASOS NUMERADOS (cómo trabajamos)
-------------------------------------------------------------------------- */
.pasos {
list-style: none;
margin: clamp(2.5rem, 5vw, 3.8rem) 0 0;
padding: 0;
display: grid;
gap: 0;
counter-reset: paso;
}
.paso {
display: grid;
grid-template-columns: 5.5rem minmax(0, 1fr);
gap: clamp(1rem, 3vw, 2.4rem);
padding-block: clamp(1.6rem, 3.4vw, 2.6rem);
border-top: 1px solid var(--linea-en-claro);
position: relative;
}
.oscuro .paso { border-top-color: var(--linea-en-oscuro); }
.paso:last-child { border-bottom: 1px solid var(--linea-en-claro); }
.oscuro .paso:last-child { border-bottom-color: var(--linea-en-oscuro); }
.paso .numero {
counter-increment: paso;
font-family: var(--titulos);
font-weight: 800;
font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.4rem);
line-height: 0.9;
letter-spacing: -0.05em;
color: var(--ambar);
opacity: 0.95;
}
.paso .numero::before { content: counter(paso, decimal-leading-zero); }
.paso h3 { margin-bottom: 0.35em; }
.paso p { color: var(--piedra-oscura); }
.oscuro .paso p { color: var(--piedra-clara); }
@media (max-width: 640px) {
.paso { grid-template-columns: 1fr; gap: 0.5rem; }
.paso .numero { font-size: 2rem; }
}
/* --------------------------------------------------------------------------
12. CASOS (trabajos ya hechos)
-------------------------------------------------------------------------- */
.casos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
gap: 1.2rem;
margin-top: clamp(2.4rem, 5vw, 3.5rem);
}
.caso {
border: 1px solid var(--linea-en-claro);
border-radius: var(--radio);
padding: clamp(1.4rem, 3vw, 1.9rem);
background: var(--blanco);
color: var(--petroleo);
display: flex;
flex-direction: column;
gap: 0.9rem;
transition: box-shadow 0.22s var(--curva), transform 0.22s var(--curva);
}
@media (hover: hover) and (pointer: fine) {
.caso:hover { box-shadow: var(--sombra-suave); transform: translateY(-2px); }
}
.oscuro .caso {
border-color: var(--linea-en-oscuro);
background: rgba(169, 192, 188, 0.06);
color: var(--arena);
}
.caso .etiqueta {
font-family: var(--titulos);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--ambar);
}
.caso h3 { font-size: 1.28rem; margin-bottom: 0; }
.caso p { margin: 0; font-size: 0.99rem; line-height: 1.55; max-width: none; }
/* El antes y el después dentro de una ficha de caso */
.caso .tramo { display: grid; gap: 0.3rem; }
.caso .tramo .rotulo {
font-family: var(--titulos);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--piedra-oscura);
}
.oscuro .caso .tramo .rotulo { color: var(--piedra-clara); }
.caso .tramo.resultado-caso .rotulo { color: var(--ambar); }
.caso .detalles {
list-style: none;
margin: 0.2rem 0 0;
padding: 0;
display: grid;
gap: 0.5rem;
border-top: 1px solid var(--linea-en-claro);
padding-top: 0.9rem;
}
.oscuro .caso .detalles { border-top-color: var(--linea-en-oscuro); }
.caso .detalles li {
display: flex;
gap: 0.6rem;
align-items: baseline;
font-size: 0.93rem;
line-height: 1.45;
color: var(--piedra-oscura);
}
.oscuro .caso .detalles li { color: var(--piedra-clara); }
.caso .detalles li::before {
content: '';
width: 5px; height: 5px;
border-radius: 50%;
background: var(--ambar);
flex: none;
transform: translateY(-2px);
}
/* Cifras dentro de una ficha de caso */
.caso .cifras {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1.8rem;
padding-top: 0.9rem;
border-top: 1px solid var(--linea-en-claro);
}
.oscuro .caso .cifras { border-top-color: var(--linea-en-oscuro); }
.caso .cifras div { display: grid; gap: 0.1rem; }
.caso .cifras .valor {
font-family: var(--titulos);
font-weight: 800;
font-size: 1.5rem;
line-height: 1;
letter-spacing: -0.03em;
color: var(--ambar-texto);
}
.oscuro .caso .cifras .valor { color: var(--ambar); }
.caso .cifras .rotulo-cifra {
font-size: 0.82rem;
line-height: 1.3;
color: var(--piedra-oscura);
}
.oscuro .caso .cifras .rotulo-cifra { color: var(--piedra-clara); }
.nota-casos {
margin-top: clamp(1.4rem, 3vw, 2rem);
font-size: 0.9rem;
color: var(--piedra-oscura);
max-width: 52ch;
}
.oscuro .nota-casos { color: var(--piedra-clara); }
/* --------------------------------------------------------------------------
13. BLOQUE DE CIERRE (la llamada a escribir, se repite al final de cada página)
-------------------------------------------------------------------------- */
.cierre { text-align: left; }
.cierre h2 { max-width: 18ch; }
.cierre .entrada { margin-bottom: 2.2rem; }
/* --------------------------------------------------------------------------
14. FORMULARIO
-------------------------------------------------------------------------- */
/* El formulario a la izquierda y los motivos para escribir a la derecha */
.zona-contacto {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 900px) {
.zona-contacto { grid-template-columns: 1fr; gap: 2.5rem; }
}
.motivos {
background: var(--blanco);
/* El color de letra se fija aquí: si no, dentro de una sección oscura
hereda el texto claro y no se lee. */
color: var(--petroleo);
border: 1px solid var(--linea-en-claro);
border-radius: var(--radio);
padding: clamp(1.4rem, 3vw, 2rem);
}
.motivos h3 { font-size: 1.2rem; margin-bottom: 1rem; }
.motivos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.motivos li {
display: flex;
gap: 0.8rem;
align-items: flex-start;
font-size: 0.99rem;
line-height: 1.5;
color: var(--piedra-oscura);
}
.motivos li strong { color: var(--petroleo); font-weight: 600; display: block; }
.motivos li svg { color: var(--ambar); flex: none; margin-top: 3px; }
.formulario {
display: grid;
gap: 1.15rem;
max-width: 34rem;
margin-top: 2.2rem;
}
.campo { display: grid; gap: 0.45rem; }
.campo label {
font-family: var(--titulos);
font-size: 0.86rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--piedra-clara);
}
.claro .campo label, .claro-suave .campo label { color: var(--piedra-oscura); }
/* Sobre fondo claro (que es donde está el formulario de contacto) */
.campo input, .campo textarea {
font-family: var(--texto);
font-size: 1.02rem;
color: var(--petroleo);
background: var(--blanco);
border: 1px solid var(--linea-en-claro);
border-radius: var(--radio);
padding: 0.85rem 1rem;
width: 100%;
transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.campo textarea { min-height: 8.5rem; resize: vertical; line-height: 1.55; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--piedra-oscura); opacity: 0.8; }
.campo input:focus, .campo textarea:focus {
outline: none;
border-color: var(--ambar);
box-shadow: 0 0 0 3px rgba(209, 143, 60, 0.24);
}
/* Si algún día el formulario va sobre fondo oscuro, se adapta solo */
.oscuro .campo input, .oscuro .campo textarea {
color: var(--arena);
background: rgba(169, 192, 188, 0.07);
border-color: var(--linea-en-oscuro);
}
.oscuro .campo input::placeholder, .oscuro .campo textarea::placeholder { color: var(--piedra-clara); opacity: 0.75; }
.oscuro .campo input:focus, .oscuro .campo textarea:focus { background: rgba(169, 192, 188, 0.11); }
/* Trampa para robots: invisible para las personas, la rellenan los programas */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso-formulario {
font-size: 0.92rem;
color: var(--piedra-clara);
max-width: 34rem;
margin-top: 0.4rem;
}
.claro .aviso-formulario, .claro-suave .aviso-formulario { color: var(--piedra-oscura); }
/* Mensaje que aparece al enviar */
.respuesta-formulario {
margin-top: 1rem;
padding: 0.95rem 1.15rem;
border-radius: var(--radio);
border: 1px solid var(--ambar);
background: rgba(209, 143, 60, 0.12);
color: var(--arena);
font-size: 0.98rem;
max-width: 34rem;
display: none;
}
.claro .respuesta-formulario, .claro-suave .respuesta-formulario { color: var(--petroleo); }
.respuesta-formulario[data-visible='si'] { display: block; }
/* Según cómo haya ido el envío */
.respuesta-formulario[data-estado='bien'] {
border-color: var(--ambar);
background: rgba(209, 143, 60, 0.12);
font-weight: 500;
}
.respuesta-formulario[data-estado='error'] {
border-color: #B3452A;
background: rgba(179, 69, 42, 0.10);
}
.respuesta-formulario[data-estado='espera'] {
border-color: var(--linea-en-claro);
background: transparent;
opacity: 0.8;
}
.oscuro .respuesta-formulario[data-estado='espera'] { border-color: var(--linea-en-oscuro); }
/* Otra vía de contacto, debajo del formulario */
.otra-via {
margin-top: 2.4rem;
padding-top: 1.6rem;
border-top: 1px solid var(--linea-en-oscuro);
max-width: 34rem;
}
.claro .otra-via, .claro-suave .otra-via { border-top-color: var(--linea-en-claro); }
/* --------------------------------------------------------------------------
15. PIE DE PÁGINA
-------------------------------------------------------------------------- */
.pie {
background: var(--petroleo-hondo);
color: var(--piedra-clara);
padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
font-size: 0.94rem;
}
.pie .columnas {
display: grid;
grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
gap: clamp(1.8rem, 4vw, 3.5rem);
padding-bottom: 2.4rem;
border-bottom: 1px solid var(--linea-en-oscuro);
}
.pie h4 {
color: var(--arena);
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 1rem;
}
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.pie a { text-decoration: none; transition: color 0.25s ease; }
.pie a:hover { color: var(--ambar); }
.pie .lema {
font-family: var(--titulos);
font-weight: 700;
font-size: 1.3rem;
color: var(--arena);
letter-spacing: -0.02em;
margin-bottom: 0.7rem;
}
.pie .descripcion { max-width: 34ch; margin: 0; font-size: 0.94rem; }
.pie .legales { display: inline-flex; gap: 1.4rem; flex-wrap: wrap; }
/* Altura suficiente para pulsarlos: la norma pide 24 px */
.pie .legales a, .pie ul a { display: inline-flex; align-items: center; min-height: 24px; }
.pie .linea-final {
padding-top: 1.6rem;
display: flex;
flex-wrap: wrap;
gap: 0.6rem 1.6rem;
justify-content: space-between;
font-size: 0.86rem;
}
@media (max-width: 760px) {
.pie .columnas { grid-template-columns: 1fr; gap: 2.2rem; }
}
/* --------------------------------------------------------------------------
16. ANIMACIONES DE ENTRADA
IMPORTANTE: el estado oculto lo pone el JavaScript (data-visto="no"), nunca
el CSS de partida. Si el script fallara, todo el contenido se ve igual.
-------------------------------------------------------------------------- */
[data-visto='no'] {
opacity: 0;
transform: translateY(26px);
}
[data-visto] {
transition: opacity 0.55s var(--curva), transform 0.55s var(--curva);
transition-delay: var(--espera, 0s);
}
[data-visto='si'] { opacity: 1; transform: none; }
/* Quien tenga activado "reducir movimiento" no ve nada de esto */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
[data-visto='no'] { opacity: 1; transform: none; }
/* El punto se queda arriba, quieto, sin dar la vuelta */
.marca-gigante .aro-grande .punto { animation: none; }
.repeticiones { animation: none; }
}
/* --------------------------------------------------------------------------
17. BLOQUE "TODO LO QUE TIENE UN PATRÓN" (página de automatizaciones)
-------------------------------------------------------------------------- */
.patron { margin-top: clamp(2rem, 4vw, 3rem); }
.ciclo {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem 0.7rem;
margin-bottom: clamp(1.8rem, 3vw, 2.4rem);
}
.ciclo .vuelta {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.6rem 0.9rem;
border: 1px dashed var(--linea-en-oscuro);
border-radius: var(--radio);
font-size: 0.94rem;
color: var(--piedra-clara);
white-space: nowrap;
}
.claro .ciclo .vuelta, .claro-suave .ciclo .vuelta {
border-color: var(--linea-en-claro);
color: var(--piedra-oscura);
}
.ciclo .vuelta::before {
content: '';
width: 7px; height: 7px;
border-radius: 50%;
border: 1.5px solid currentColor;
flex: none;
opacity: 0.7;
}
.ciclo .hacia {
color: var(--ambar);
flex: none;
display: inline-flex;
}
.ciclo .resultado {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.6rem 1rem;
background: var(--ambar);
color: var(--petroleo-hondo);
border-radius: var(--radio);
font-family: var(--titulos);
font-weight: 700;
font-size: 0.94rem;
white-space: nowrap;
}
/* En móvil el ciclo se lee en vertical, que es como cabe bien */
@media (max-width: 620px) {
.ciclo { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.ciclo .vuelta, .ciclo .resultado { width: 100%; white-space: normal; }
.ciclo .hacia { transform: rotate(90deg); margin-left: 1rem; }
}
/* --------------------------------------------------------------------------
18. AJUSTES DE MÓVIL
La mayoría de los clientes van a ver esto desde el teléfono, así que aquí
se aprieta el aire sobrante y se agrandan los títulos.
-------------------------------------------------------------------------- */
@media (max-width: 640px) {
:root {
--aire-seccion: 3.6rem; /* menos hueco muerto entre secciones */
--margen-lateral: 1.15rem; /* más ancho aprovechado */
}
h1 { font-size: clamp(2.5rem, 9.5vw, 3.2rem); line-height: 1; }
h2 { font-size: clamp(1.95rem, 7.6vw, 2.5rem); line-height: 1.06; }
h3 { font-size: 1.28rem; }
.entrada { font-size: 1.08rem; max-width: none; }
p { max-width: none; }
.portada { padding-top: 7rem; padding-bottom: 3.5rem; }
.cabecera-pagina { padding-top: 6.6rem; padding-bottom: 2.8rem; }
/* Los botones, a lo ancho: es lo más fácil de acertar con el pulgar */
.acciones { flex-direction: column; align-items: stretch; gap: 0.7rem; }
.acciones .boton { justify-content: center; padding-block: 1.05rem; }
.encabezado h2::before, .titulo-con-filete::before { width: 38px; height: 3px; }
.tareas li { padding-block: 0.9rem; gap: 0.75rem; flex-direction: column; }
.tareas .repite { padding-top: 0; min-width: 0; }
.cambio { padding: 1.2rem 1.1rem; }
.panel-tareas { padding: 1.1rem 1rem; }
.caso { padding: 1.3rem 1.2rem; min-height: 0; }
}
/* --------------------------------------------------------------------------
19. OPCIONES EN BOTONES (la duración de la llamada)
-------------------------------------------------------------------------- */
.opciones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.opciones label {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.6rem 0.95rem;
border: 1px solid var(--linea-en-claro);
border-radius: var(--radio);
background: var(--blanco);
font-family: var(--titulos);
font-weight: 600;
font-size: 0.92rem;
letter-spacing: 0;
text-transform: none;
color: var(--petroleo);
cursor: pointer;
transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.opciones label:hover { border-color: var(--ambar); }
/* El punto de radio de verdad va escondido: lo que se ve es el botón */
.opciones input {
position: absolute;
opacity: 0;
width: 0; height: 0;
}
.opciones label:has(input:checked) {
/* Elegido: se marca con el borde y un fondo suave, no con un amarillo pleno.
El color de la letra depende del fondo de la sección. */
background: rgba(209, 143, 60, 0.16);
border-color: var(--ambar);
color: var(--petroleo);
box-shadow: inset 0 0 0 1px var(--ambar);
}
.oscuro .opciones label:has(input:checked) { color: var(--arena); }
.oscuro .opciones label {
background: rgba(169, 192, 188, 0.07);
border-color: var(--linea-en-oscuro);
color: var(--arena);
}
.oscuro .opciones label:hover { border-color: var(--ambar); }
.opciones label:has(input:focus-visible) {
outline: 2px solid var(--ambar);
outline-offset: 3px;
}
/* La marca de "lo recomendado" */
.opciones .recomendado {
font-family: var(--texto);
font-weight: 500;
font-size: 0.78rem;
color: var(--ambar);
}
.pista-campo {
font-size: 0.86rem;
color: var(--piedra-oscura);
margin: 0;
transition: color 0.25s ease;
}
.oscuro .pista-campo { color: var(--piedra-clara); }
/* Cuando el número no encaja con el país elegido */
.pista-campo[data-error='si'] { color: var(--ambar); font-weight: 500; }
.campo input[aria-invalid='true'] { border-color: var(--ambar); }
/* Dos campos en una fila cuando caben (día y hora) */
.fila-campos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 520px) {
.fila-campos { grid-template-columns: 1fr; }
}
/* Aviso destacado de que todo esto es gratis */
.sin-coste {
display: flex;
gap: 0.85rem;
align-items: flex-start;
padding: 1.1rem 1.25rem;
border: 1px solid var(--ambar);
border-radius: var(--radio);
background: rgba(209, 143, 60, 0.10);
margin-bottom: clamp(1.6rem, 3vw, 2.2rem);
max-width: 46rem;
}
.sin-coste svg { color: var(--ambar); flex: none; margin-top: 3px; }
.sin-coste p { margin: 0; max-width: none; }
.sin-coste strong { font-weight: 600; }
/* --------------------------------------------------------------------------
20. TELÉFONO CON PREFIJO
Un desplegable con el prefijo y al lado solo los dígitos del número.
-------------------------------------------------------------------------- */
.telefono-compuesto {
display: grid;
grid-template-columns: minmax(8.5rem, auto) minmax(0, 1fr);
gap: 0.6rem;
}
.telefono-compuesto select {
font-family: var(--texto);
font-size: 1.02rem;
color: var(--petroleo);
background: var(--blanco);
border: 1px solid var(--linea-en-claro);
border-radius: var(--radio);
padding: 0.85rem 0.9rem;
width: 100%;
cursor: pointer;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.telefono-compuesto select:focus {
outline: none;
border-color: var(--ambar);
box-shadow: 0 0 0 3px rgba(209, 143, 60, 0.24);
}
/* Sobre fondo oscuro, que es donde está el formulario de la llamada */
.oscuro .telefono-compuesto select {
color: var(--arena);
background: var(--petroleo-hondo);
border-color: var(--linea-en-oscuro);
}
/* Los campos de fecha y hora del navegador se pintan solos según esto */
.oscuro .campo input[type='date'],
.oscuro .campo input[type='time'] { color-scheme: dark; }
@media (max-width: 460px) {
.telefono-compuesto { grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
21. PÁGINAS LEGALES (aviso legal y privacidad)
Texto largo y sin adornos: aquí lo único que importa es que se lea.
-------------------------------------------------------------------------- */
.legal { max-width: 46rem; }
.legal h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); margin-top: 2.6rem; }
.legal h2::before { content: none; }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: 1.12rem; margin-top: 1.8rem; margin-bottom: 0.4rem; }
.legal p, .legal li { font-size: 1rem; line-height: 1.7; }
.legal ul { padding-left: 1.1rem; display: grid; gap: 0.5rem; margin: 0 0 1.2em; }
.legal .dato { font-weight: 600; }
.legal .actualizado {
margin-top: 2.6rem;
padding-top: 1.2rem;
border-top: 1px solid var(--linea-en-claro);
font-size: 0.9rem;
color: var(--piedra-oscura);
}
/* --------------------------------------------------------------------------
22. CASILLA DE ACEPTACIÓN DEL FORMULARIO
-------------------------------------------------------------------------- */
.acepta {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.7rem;
align-items: start;
font-size: 0.9rem;
line-height: 1.5;
}
.acepta input[type='checkbox'] {
/* 24 px es el mínimo que pide la norma de accesibilidad para poder pulsarlo */
width: 24px;
height: 24px;
margin: 0;
accent-color: var(--ambar);
cursor: pointer;
flex: none;
}
.acepta label { cursor: pointer; color: var(--piedra-oscura); }
.oscuro .acepta label { color: var(--piedra-clara); }
.acepta a { color: var(--ambar-texto); text-underline-offset: 3px; }
.oscuro .acepta a { color: var(--ambar); }
.acepta[data-error='si'] label { color: var(--ambar-texto); }
.oscuro .acepta[data-error='si'] label { color: var(--ambar); }
/* --------------------------------------------------------------------------
23. DIBUJOS EXPLICATIVOS
Esquemas hechos a mano en SVG. Cuentan de un vistazo lo que si no habría que
explicar en tres párrafos, y al ser dibujo se ven nítidos en cualquier
pantalla y no pesan nada.
-------------------------------------------------------------------------- */
.dibujo {
width: 100%;
height: auto;
max-width: 560px;
margin-inline: auto;
}
.dibujo .trazo { stroke: var(--piedra-clara); stroke-width: 1.5; fill: none; }
.dibujo .relleno { fill: var(--piedra-clara); opacity: 0.14; }
/* En los dibujos el ámbar va como relleno o como línea, no como texto, así que
aquí sí se usa el ámbar vivo aunque la sección sea clara. El texto de acento
sigue usando el ámbar oscuro, que es el que se lee. */
.dibujo { --ambar-dibujo: #D18F3C; }
.dibujo .acento { fill: var(--ambar-dibujo); }
.dibujo .acento-trazo { stroke: var(--ambar-dibujo); stroke-width: 1.5; fill: none; }
.dibujo .letra {
font-family: var(--titulos);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
fill: var(--arena);
}
.dibujo .letra-suave { font-family: var(--texto); font-size: 10px; fill: var(--piedra-clara); }
.dibujo .acento-letra { fill: var(--ambar); }
.claro .dibujo .trazo, .claro-suave .dibujo .trazo { stroke: var(--piedra-oscura); }
.claro .dibujo .relleno, .claro-suave .dibujo .relleno { fill: var(--piedra-oscura); opacity: 0.10; }
.claro .dibujo .letra, .claro-suave .dibujo .letra { fill: var(--petroleo); }
.claro .dibujo .letra-suave, .claro-suave .dibujo .letra-suave { fill: var(--piedra-oscura); }
/* Bloque de texto con su dibujo al lado */
.con-dibujo {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(1.8rem, 4vw, 3.5rem);
align-items: center;
}
@media (max-width: 860px) {
.con-dibujo { grid-template-columns: 1fr; gap: 2rem; }
.dibujo { max-width: 460px; }
}
/* --------------------------------------------------------------------------
24. DIBUJOS QUE SE EXPLICAN SOLOS
Las animaciones arrancan cuando el dibujo entra en pantalla (el guion pone
data-visto="si"), no al cargar la página: si no, pasarían sin que nadie las
vea. Todas mueven transform u opacidad, que es lo único que no obliga al
navegador a recolocar la página.
-------------------------------------------------------------------------- */
/* --- El ciclo de pasos: cada uno se enciende en su turno ------------------ */
.ciclo .vuelta { position: relative; overflow: hidden; }
/* El relleno ámbar entra por la izquierda. Es una capa aparte que se estira,
así no hay que animar el color de fondo. */
.ciclo .vuelta::after {
content: '';
position: absolute;
inset: 0;
background: rgba(209, 143, 60, 0.18);
transform: scaleX(0);
transform-origin: left;
z-index: -1;
}
.ciclo .vuelta > * { position: relative; }
/* La vuelta entera dura 8 s y se repite: da tiempo a leerla, y quien llegue
tarde a la sección la ve igualmente desde el principio.
Cada paso ocupa su tramo dentro de esos 8 s. */
.ciclo[data-visto='si'] .vuelta::after {
animation: rellenar-ciclo 8s linear infinite;
animation-delay: calc(var(--turno-paso, 0) * 0.9s);
}
.ciclo[data-visto='si'] .vuelta {
animation: encender-ciclo 8s linear infinite;
animation-delay: calc(var(--turno-paso, 0) * 0.9s);
}
.ciclo[data-visto='si'] .resultado {
animation: rematar-ciclo 8s linear infinite;
animation-delay: calc(var(--turno-paso, 0) * 0.9s);
}
/* Cada paso: se rellena en el primer segundo, se queda lleno un rato y se
apaga al final para volver a empezar. Los porcentajes son sobre los 8 s. */
@keyframes rellenar-ciclo {
0% { transform: scaleX(0); }
9% { transform: scaleX(1); }
82% { transform: scaleX(1); }
92%, 100% { transform: scaleX(0); }
}
@keyframes encender-ciclo {
0% { border-color: var(--linea-en-oscuro); }
9%, 82% { border-color: var(--ambar); }
92%, 100% { border-color: var(--linea-en-oscuro); }
}
@keyframes rematar-ciclo {
0% { opacity: 0.25; transform: scale(0.96); }
7% { opacity: 1; transform: scale(1.04); }
11%, 82% { opacity: 1; transform: scale(1); }
92%, 100% { opacity: 0.25; transform: scale(0.96); }
}
@keyframes rellenar {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes encender {
from { border-color: var(--linea-en-oscuro); }
to { border-color: var(--ambar); }
}
@keyframes rematar {
0% { opacity: 0; transform: scale(0.94); }
60% { opacity: 1; transform: scale(1.03); }
100% { opacity: 1; transform: scale(1); }
}
.claro .ciclo[data-visto='si'] .vuelta,
.claro-suave .ciclo[data-visto='si'] .vuelta { animation-name: encender-ciclo-claro; }
@keyframes encender-ciclo-claro {
0% { border-color: var(--linea-en-claro); }
9%, 82% { border-color: #D18F3C; }
92%, 100% { border-color: var(--linea-en-claro); }
}
@media (prefers-reduced-motion: reduce) {
.ciclo .vuelta::after { transform: scaleX(1); animation: none; }
.ciclo[data-visto='si'] .vuelta,
.ciclo[data-visto='si'] .resultado { animation: none; }
}
/* --- Los dibujos en SVG: se trazan solos al entrar en pantalla -----------
Las líneas se dibujan de principio a fin, y lo ámbar aparece después, que
es donde queremos que se vaya el ojo. Todo con propiedades baratas.
Para que funcione, cada lleva pathLength="1" en el HTML: así la
línea mide 1 sea cual sea su longitud real y no hay que medir nada. */
/* Las líneas y las flechas ya no se dibujan: distraían del contenido y en un
diagrama con varias ramas costaba seguirlo. Se ven desde el principio. */
/* Lo ámbar entra al final, con un golpe seco */
.dibujo[data-visto='si'] .acento {
animation: aparecer-acento 0.4s var(--curva) both;
animation-delay: calc(var(--turno, 0) * 0.12s + 0.55s);
transform-box: fill-box;
transform-origin: center;
}
@keyframes aparecer-acento {
0% { opacity: 0; transform: scale(0.6); }
65% { opacity: 1; transform: scale(1.12); }
100% { opacity: 1; transform: scale(1); }
}
/* La última estrella va a medias a propósito: la valoración no es un cinco
redondo. Su animación termina en esa opacidad, no en la máxima. */
.dibujo .media-estrella { opacity: 0.35; }
.dibujo[data-visto='si'] .media-estrella { animation-name: aparecer-media; }
@keyframes aparecer-media {
0% { opacity: 0; transform: scale(0.6); }
65% { opacity: 0.35; transform: scale(1.12); }
100% { opacity: 0.35; transform: scale(1); }
}
/* Las barras de los tres presupuestos crecen desde el suelo */
.dibujo[data-visto='si'] .barra {
animation: crecer 0.65s var(--curva) both;
animation-delay: calc(var(--turno, 0) * 0.12s + 0.15s);
transform-box: fill-box;
transform-origin: bottom;
}
@keyframes crecer {
from { transform: scaleY(0); }
to { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
.dibujo[data-visto='si'] path,
.dibujo[data-visto='si'] .acento,
.dibujo[data-visto='si'] .barra { animation: none; }
.dibujo path { stroke-dashoffset: 0; }
}