/* engalicia.es — landing del dominio (prefijo landing/engalicia en el bucket).
   Sin fuentes externas, sin cookies, sin analítica de terceros: esta página
   afirma justo eso, así que tiene que cumplirlo. Las familias son las que ya
   están en el equipo; el carácter lo pone la serif editorial.
   Paleta: verde Atlántico + toxo (la flor amarilla del monte gallego). */

:root{
  --paper:#EFF2EF; --paper-2:#E5EAE6; --white:#FBFCFB;
  --ink:#16201E; --ink-soft:#5C6A66; --ink-faint:#8A938E;
  --sea:#0E4A4C; --sea-deep:#072F31; --sea-tint:#D9E5E3;
  --toxo:#E8B44C; --toxo-bg:#FDF7E9; --toxo-deep:#B4801C;
  --line:#C7D1CB; --line-soft:#DCE3DE;

  --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --body:ui-sans-serif,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1140px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--display); font-weight:600; margin:0; line-height:1.08; letter-spacing:-.015em}
p{margin:0}
a{color:inherit}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--toxo); outline-offset:3px}

.wrap{width:min(var(--wrap),100% - 44px); margin-inline:auto}

/* grano de papel — textura, no ruido visual */
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─────────────────────────────── marca ─────────────────────────────── */
.mark{display:inline-flex; align-items:baseline; gap:.5rem; text-decoration:none}
.mark b{
  font-family:var(--display); font-weight:600; font-size:20px; letter-spacing:.01em;
}
.mark i{
  font-style:normal; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--toxo); font-family:var(--body); font-weight:700;
}

/* ─────────────────────────────── hero ──────────────────────────────── */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--sea-deep); color:var(--paper);
  padding:clamp(22px,3vw,32px) 0 clamp(72px,10vw,124px);
}
/* halo de luz: da profundidad sin usar una foto */
.hero::before{
  content:""; position:absolute; z-index:-1; inset:-30% -10% auto -10%; height:120%;
  background:
    radial-gradient(58% 46% at 78% 8%, rgba(232,180,76,.20) 0%, transparent 62%),
    radial-gradient(48% 40% at 8% 96%, rgba(14,74,76,.95) 0%, transparent 70%);
}
.hero .wrap{position:relative; z-index:2}

.hero-top{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:clamp(48px,8vw,96px)}
.hero-top .mark b{color:var(--white)}
.hero-top nav{display:flex; gap:26px; font-size:14.5px}
.hero-top nav a{color:rgba(239,242,239,.72); text-decoration:none; padding:4px 0; border-bottom:1px solid transparent}
.hero-top nav a:hover{color:var(--white); border-bottom-color:var(--toxo)}

/* ── la portada, en dos celdas ─────────────────────────────────────────
   El texto ocupaba la mitad izquierda y la derecha se quedaba vacía. La
   fotografía de la banda se queda donde está, debajo de la ola; ésta es otra,
   vertical, que llena el hueco. Por debajo de 900 px la portada vuelve a ser
   una sola columna y la foto se retira: la banda ya trae una, y dos seguidas
   en una pantalla estrecha es demasiado antes de leer nada.               */
.hero-rejilla{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,56px); align-items:center;
}
.hero-foto{display:block}
.hero-foto img{
  width:100%; height:clamp(320px,40vw,480px); object-fit:cover;
  border-radius:3px; box-shadow:0 24px 60px rgba(0,0,0,.34);
}
@media (max-width:900px){
  .hero-rejilla{grid-template-columns:1fr; gap:0}
  .hero-foto{display:none}
}

.eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--toxo); display:flex; align-items:center; gap:14px; margin-bottom:22px;
}
.eyebrow::after{content:""; height:1px; flex:1; background:linear-gradient(90deg,rgba(232,180,76,.55),transparent)}

.hero h1{
  font-size:clamp(36px,4.6vw,62px);
  max-width:12ch; color:var(--white); text-wrap:balance;
}
.hero h1 em{
  font-style:normal; position:relative; white-space:nowrap;
}
/* subrayado a mano alzada bajo la palabra clave */
.hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.04em; height:.30em;
  background:var(--toxo); opacity:.9; z-index:-1;
  transform:skewY(-1.1deg);
}
.hero .lede{
  margin-top:clamp(22px,3vw,30px); max-width:46ch;
  font-size:clamp(17px,1.5vw,20.5px); line-height:1.62; color:rgba(239,242,239,.82);
}
.hero .lede b{color:var(--white); font-weight:600}

.cta-row{display:flex; flex-wrap:wrap; gap:13px; margin-top:clamp(30px,4vw,42px); align-items:center}
.btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-weight:600; font-size:16px; padding:15px 26px; border-radius:2px;
  border:1px solid transparent; transition:transform .16s ease, background .16s ease;
}
.btn.primary{background:var(--toxo); color:var(--sea-deep); border-color:var(--toxo)}
.btn.primary:hover{background:#F2C468; transform:translateY(-2px)}
.btn.ghost{border-color:rgba(239,242,239,.34); color:var(--paper)}
.btn.ghost:hover{border-color:var(--paper); background:rgba(255,255,255,.06); transform:translateY(-2px)}
.btn .arrow{transition:transform .16s ease}
.btn:hover .arrow{transform:translateX(3px)}

.hero-note{margin-top:20px; font-size:14px; color:rgba(239,242,239,.55)}

/* ría: línea de costa dibujada, ancla la marca en el sitio */
.ria{position:absolute; z-index:1; left:0; right:0; bottom:-1px; height:clamp(60px,9vw,120px); opacity:.5}
.ria svg{width:100%; height:100%; display:block}

/* ───────────────────────────── secciones ───────────────────────────── */
.sec{padding:clamp(64px,9vw,112px) 0; position:relative}
.sec-head{max-width:60ch; margin-bottom:clamp(38px,5vw,58px)}
.sec-head .kicker{
  font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--toxo-deep); margin-bottom:16px;
}
.sec-head h2{font-size:clamp(28px,3.9vw,44px); text-wrap:balance}
.sec-head p{margin-top:16px; color:var(--ink-soft); font-size:18px; max-width:54ch}

/* pasos — numerales grandes, aire de revista */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,3.4vw,48px)}
.step{border-top:2px solid var(--ink); padding-top:22px}
.step .n{
  font-family:var(--display); font-size:56px; line-height:1; color:var(--toxo-deep);
  display:block; margin-bottom:14px; font-weight:600;
}
.step h3{font-size:21px; margin-bottom:10px}
.step p{color:var(--ink-soft); font-size:16px}

/* lo que incluye — rejilla con filetes, no tarjetas con sombra */
.grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.cell{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(24px,2.6vw,34px);
}
.cell h3{font-size:19px; margin-bottom:9px; display:flex; align-items:center; gap:10px}
.cell h3::before{content:""; width:7px; height:7px; background:var(--toxo); border-radius:50%; flex:none}
.cell p{color:var(--ink-soft); font-size:15.5px}

/* ejemplo real */
.example{background:var(--paper-2)}
.galeria{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
/* Capturas de verdad de cada web, servidas desde aquí. Antes había una
   miniatura abstracta para no inventarse una captura; ahora las webs existen y
   se enseñan tal cual. La imagen se copia a este dominio a propósito: esta
   página promete que no pide nada a un servidor ajeno.                      */
.muestra{display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--white); border:1px solid var(--line); border-radius:3px;
  overflow:hidden;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease}
.muestra:hover{transform:translateY(-3px); border-color:var(--sea);
  box-shadow:0 14px 32px rgba(0,0,0,.12)}
.muestra img{display:block; width:100%; height:auto; border-bottom:1px solid var(--line)}
.muestra-txt{display:flex; flex-direction:column; gap:7px; flex:1; padding:15px 16px 17px}
.muestra .muestra-tipo{font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--toxo-deep)}
.muestra h3{font-family:var(--display); font-size:19px; margin:0}
.muestra p{font-size:15px; color:var(--ink-soft); margin:0; flex:1}
.muestra-url{display:block; font-size:12.5px; font-weight:650;
  color:var(--sea); overflow-wrap:normal}
.muestra-url i{font-style:normal; margin-left:4px;
  transition:margin-left .22s ease}
.muestra:hover .muestra-url i{margin-left:8px}
.galeria-pie + .galeria-pie{margin-top:6px}
.galeria-pie a{color:inherit; font-weight:650}
.galeria-pie{margin-top:22px; color:var(--ink-soft); font-size:15px; max-width:70ch}
@media (max-width:1000px){ .galeria{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .galeria{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .galeria{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .muestra, .muestra-url i{transition:none}
  .muestra:hover{transform:none}
  .muestra:hover .muestra-url i{margin-left:4px}
}

/* cierre */
.close{background:var(--sea); color:var(--paper); position:relative; overflow:hidden; isolation:isolate}
.close h2{color:var(--white); font-size:clamp(28px,4.2vw,46px); max-width:20ch; text-wrap:balance}
.close p{margin-top:18px; color:rgba(239,242,239,.8); max-width:48ch; font-size:18px}

/* pie */
.foot{background:var(--sea-deep); color:rgba(239,242,239,.6); font-size:14.5px; padding:44px 0}
.foot .wrap{display:flex; flex-wrap:wrap; gap:18px 26px; align-items:center}
.foot .mark b{color:var(--white); font-size:17px}
.foot a{color:rgba(239,242,239,.72); text-decoration:none}
.foot a:hover{color:var(--white); text-decoration:underline}
.foot .right{margin-left:auto; display:flex; gap:22px; flex-wrap:wrap}

/* ───────────────────────── entrada escalonada ──────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .72s cubic-bezier(.2,.7,.3,1) backwards}
  .rise:nth-child(1){animation-delay:.04s}
  .rise:nth-child(2){animation-delay:.12s}
  .rise:nth-child(3){animation-delay:.20s}
  .rise:nth-child(4){animation-delay:.28s}
  @keyframes rise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
}

/* ──────────────────────────── responsive ───────────────────────────── */
@media (max-width:900px){
  .steps{grid-template-columns:1fr; gap:30px}
  .grid{grid-template-columns:1fr 1fr}
  .hero-top nav{display:none}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .foot .right{margin-left:0; width:100%}
}

/* ── páginas legales del dominio ─────────────────────────────────────── */
.legal-head{background:var(--sea-deep); color:var(--paper); padding:clamp(22px,3vw,32px) 0 clamp(40px,6vw,64px)}
.legal-head .mark b{color:var(--white)}
.legal-head h1{color:var(--white); font-size:clamp(30px,4.6vw,52px); margin-top:clamp(34px,5vw,58px)}
.legal-body{padding:clamp(48px,7vw,84px) 0 clamp(64px,9vw,104px)}
.legal-body .col{max-width:66ch}
.legal-body h2{font-size:clamp(21px,2.4vw,27px); margin:clamp(32px,4vw,46px) 0 12px}
.legal-body h2:first-child{margin-top:0}
.legal-body p{color:var(--ink-soft); margin-bottom:14px; font-size:16.5px}
.legal-body ul{color:var(--ink-soft); margin:0 0 14px; padding-left:20px; font-size:16.5px}
.legal-body li{margin-bottom:7px}
.legal-body strong{color:var(--ink)}
.legal-body .back{display:inline-block; margin-top:34px; color:var(--sea); font-weight:600;
  text-decoration:none; border-bottom:2px solid var(--toxo); padding-bottom:2px}
.pend{background:var(--toxo-bg); border:1px solid var(--toxo); border-radius:3px;
  padding:14px 16px; font-size:15px; color:var(--toxo-deep); margin-bottom:18px}

/* ── v2: cinco pasos, nota fuera del hero, atribución de plataforma ─ */
.steps{grid-template-columns:repeat(5,1fr); gap:clamp(18px,2.2vw,30px)}
.steps .step h3{font-size:17px}
.steps .step p{font-size:15px}
/* .hero-note nace blanco sobre el verde del hero; fuera de él necesita tinta */
.sec .hero-note,.close .hero-note{color:var(--ink-soft); font-size:15.5px}
.close .hero-note{color:rgba(239,242,239,.7); margin-top:18px}
.sec-head p + p{margin-top:12px}
.foot .plat{width:100%; font-size:13px; color:rgba(239,242,239,.5)}
.foot .plat a{color:rgba(239,242,239,.72)}

@media (max-width:1100px){ .steps{grid-template-columns:repeat(3,1fr)} }
@media (max-width:700px){ .steps{grid-template-columns:1fr} }

/* Un borrador tiene que anunciarse como tal en la propia página. */
.legal-draft{background:#FFF3CD; border:1px solid #E0B84C; border-radius:4px;
  padding:12px 15px; margin:0 0 24px; font-size:14px; line-height:1.55; color:#5C4200}

/* Un hueco que nadie ha rellenado tiene que verse. Se imprime también: un
   documento con huecos no debe poder pasar por definitivo en papel. */
.legal-pending{background:#FFE9A8; color:#6B4C00; padding:1px 6px; border-radius:3px;
  font-size:.92em; font-weight:600; white-space:nowrap}

/* --------------------------------------------------------------- impresión
   No generamos PDF: la página imprime a PDF desde cualquier navegador, con la
   versión, la fecha y la URL en el pie. Un PDF almacenado sería una segunda
   copia del texto que envejece en silencio mientras la página se corrige. */
@media print{
  .legal-head{border:none; padding:0 0 18pt}
  .legal-head .mark,.foot,.back,nav{display:none !important}
  .legal-head h1{font-size:20pt}
  .legal-meta{font-size:9pt}
  .legal-body{padding:0}
  .legal-body .col{max-width:none}
  .legal-body h2{font-size:13pt; margin:16pt 0 6pt; page-break-after:avoid}
  .legal-body h3{font-size:11pt; page-break-after:avoid}
  .legal-body p,.legal-body li{font-size:10pt; line-height:1.45; color:#000; orphans:3; widows:3}
  .legal-table table{font-size:9pt; page-break-inside:avoid}
  body{background:#fff; color:#000}
  @page{margin:18mm 16mm 20mm}
}

/* tablas de los documentos v0.2 (anexos del encargo, categorías de datos) */
.legal-table{overflow-x:auto; margin:16px 0}
.legal-table table{border-collapse:collapse; width:100%; font-size:14px}
.legal-table th,.legal-table td{border:1px solid var(--line); padding:8px 10px;
  text-align:left; vertical-align:top}
.legal-table th{background:var(--paper-2); font-weight:650}
.legal-meta{font-size:13.5px; opacity:.65; margin-top:10px}

/* ── Precio ─────────────────────────────────────────────────────────────── */
/* Un panel, no dos tarjetas: los dos planes son el mismo producto y sólo
   cambian en cada cuánto se paga. Dos cajas casi idénticas obligan a leer lo
   mismo dos veces para encontrar la única palabra distinta.

   El conmutador son dos `radio` ocultos y selectores de hermano. Sin una línea
   de JavaScript: estas portadas no cargan ningún script y la página de
   privacidad lo afirma. De regalo, funciona con el teclado y un lector de
   pantalla lo anuncia como lo que es. */
.precio .sec-head{text-align:center; margin-inline:auto}
.precio .sec-head p{margin-inline:auto; max-width:52ch}

.tarifa{max-width:620px; margin:0 auto}
.tarifa>input{position:absolute; opacity:0; width:1px; height:1px}

.tarifa-panel{background:var(--white); border:1px solid var(--line);
  border-radius:18px; padding:34px 34px 30px; text-align:center;
  box-shadow:0 18px 46px -30px rgba(0,0,0,.45)}

/* el segmentado */
.ciclo{display:inline-flex; gap:4px; padding:4px; margin-bottom:26px;
  background:var(--paper-2); border-radius:100px}
.ciclo label{cursor:pointer; padding:10px 22px; border-radius:100px;
  font-size:15px; font-weight:650; color:var(--ink-soft); white-space:nowrap;
  transition:background .16s ease, color .16s ease}
.ciclo label em{font-style:normal; font-size:12.5px; font-weight:700;
  color:var(--toxo-deep); margin-left:6px}
#ciclo-mes:checked~.tarifa-panel label[for="ciclo-mes"],
#ciclo-ano:checked~.tarifa-panel label[for="ciclo-ano"]{
  background:var(--white); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.14)}
/* El foco tiene que verse: el input real está oculto, así que el anillo se
   pinta sobre su etiqueta. Sin esto el conmutador es invisible al tabular. */
#ciclo-mes:focus-visible~.tarifa-panel label[for="ciclo-mes"],
#ciclo-ano:focus-visible~.tarifa-panel label[for="ciclo-ano"]{
  outline:2px solid var(--sea); outline-offset:2px}

.cifra{font-family:var(--display); font-size:64px; line-height:1;
  color:var(--sea-deep); font-variant-numeric:tabular-nums}
.cifra b{font-weight:600}
.cifra span{font-family:var(--body); font-size:19px; font-weight:600;
  color:var(--ink-soft); margin-left:4px}
.cifra-nota{margin:14px auto 24px; max-width:42ch; font-size:15px;
  color:var(--ink-soft); min-height:3em}

/* lo que enseña cada ciclo */
.c-ano,.n-ano{display:none}
#ciclo-ano:checked~.tarifa-panel .c-mes,
#ciclo-ano:checked~.tarifa-panel .n-mes{display:none}
#ciclo-ano:checked~.tarifa-panel .c-ano,
#ciclo-ano:checked~.tarifa-panel .n-ano{display:block}

.tarifa-panel .btn{margin-bottom:30px}

.incluye{list-style:none; margin:0; padding:26px 0 0; text-align:left;
  border-top:1px solid var(--line-soft);
  display:grid; grid-template-columns:repeat(2,1fr); gap:15px 24px}
.incluye li{position:relative; padding-left:25px; display:flex;
  flex-direction:column; gap:1px}
.incluye li::before{content:"✓"; position:absolute; left:0; top:0;
  color:var(--sea); font-weight:700}
.incluye li b{font-size:15px; font-weight:650}
.incluye li span{color:var(--ink-soft); font-size:14px; line-height:1.45}

.pl-legal{max-width:620px; margin:20px auto 0; font-size:13px;
  color:var(--ink-faint); line-height:1.5; text-align:center}
.pl-legal a{color:var(--ink-soft)}

@media (max-width:640px){
  .tarifa-panel{padding:26px 20px 24px}
  .cifra{font-size:52px}
  .incluye{grid-template-columns:1fr}
  .ciclo label{padding:10px 16px; font-size:14px}
}

/* ── fotografía ───────────────────────────────────────────────
   Las portadas de la casa eran de tipografía y color, sin una sola foto. Se
   añaden ahora porque el argumento es «esto es para el negocio que ya tienes»,
   y eso se dice mejor con la cara de quien atiende un mostrador que con un
   icono. Todas se descargan y se sirven desde nuestro propio dominio: la página
   de privacidad de este dominio dice por escrito que no se carga nada de
   servidores ajenos, y una foto remota la convertiría en mentira. */
.foto-banda{overflow:hidden; border-bottom:1px solid var(--line)}
.foto-banda img{width:100%; height:clamp(240px,38vw,440px); object-fit:cover;
  object-position:center 42%; display:block}

.mosaico-intro{margin:clamp(32px,4vw,48px) 0 16px; color:var(--ink-soft);
  font-size:17px; max-width:60ch}
.mosaico{display:grid; grid-template-columns:repeat(6,1fr); gap:12px}
.mosaico figure{margin:0; position:relative; overflow:hidden; aspect-ratio:1;
  background:var(--paper-2)}
.mosaico img{width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.mosaico figure:hover img{transform:scale(1.07)}
.mosaico figcaption{position:absolute; inset:auto 0 0 0; padding:24px 10px 10px;
  font-size:12.5px; font-weight:600; color:#fff; line-height:1.3;
  background:linear-gradient(transparent,rgba(10,14,13,.86))}
.mosaico-pie{margin-top:20px; color:var(--ink-soft); font-size:16px; max-width:74ch}

@media (max-width:1000px){ .mosaico{grid-template-columns:repeat(3,1fr)} }
@media (max-width:700px){ .mosaico{grid-template-columns:repeat(2,1fr)} }

/* ── Por qué nosotros ───────────────────────────────────────────────
   Una lista de filas, no una tabla: en el móvil una tabla de dos
   columnas se estruja hasta ser ilegible, y esto se apila solo.
   La última fila es la nuestra y es la única con color, para que el
   ojo llegue a ella después de haber leído lo que cuestan las demás. */
.pq-lista{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.pq-fila{display:grid; grid-template-columns:minmax(0,.4fr) minmax(0,1fr);
  gap:6px 34px; align-items:baseline;
  padding:20px 0; border-bottom:1px solid var(--line-soft)}
.pq-que{font-size:16px; font-weight:700; color:var(--ink)}
.pq-cuesta{font-size:16.5px; color:var(--ink-soft)}
.pq-fila.nuestra{background:var(--sea); border-bottom:0; margin-top:14px;
  padding:24px clamp(18px,2.6vw,28px)}
.pq-fila.nuestra .pq-que{color:var(--sea-tint)}
.pq-fila.nuestra .pq-cuesta{color:#fff; font-size:18px; line-height:1.55}
.pq-cierre{margin-top:26px; max-width:62ch; font-size:17px; color:var(--ink-soft)}

@media (max-width:640px){
  .pq-fila{grid-template-columns:1fr; gap:4px}
  .pq-fila.nuestra{padding:20px}
}