/* Capa editorial de la web: tipografía enorme en Lora cursiva, un hilo naranja que cose toda la página
   y una sola banda naranja a sangre: la oferta. Todo lo demás, noche. */
:root {
  --naranja: #E76F3C;
  --noche: #0B1F33;
  --display: clamp(3.75rem, 0.9rem + 9.5vw, 10rem);
  --titular: clamp(2.75rem, 1.2rem + 5vw, 6.5rem);
}

/* El hilo: debajo del texto, encima de los fondos. */
main { position: relative; }
.hilo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.hilo path { fill: none; stroke: var(--naranja); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
main > section { position: relative; }
main > section > * { position: relative; z-index: 3; }

/* Aviso de privacidad compacto. */
.privacy-banner { max-width: 26rem; left: auto; right: max(1rem, env(safe-area-inset-right)); margin: 0; }
/* Agrupa enlace y acciones para dejar libre la llamada principal sin cerrar el aviso. */
@media (min-width: 48rem) {
  .privacy-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .75rem; max-width: 32rem; padding: .75rem; line-height: 1.45; }
  .privacy-title, .privacy-description, .privacy-settings { grid-column: 1 / -1; margin: 0; }
  .privacy-title { font-size: 1.125rem; }
  .privacy-policy, .privacy-actions { margin: 0; }
  .privacy-actions { flex-wrap: nowrap; gap: .5rem; }
  .privacy-actions .privacy-button { flex: 1 1 auto; padding-inline: .5rem; }
  .privacy-summary { padding-block: 0; }
}
.privacy-description { font-size: .875rem; }

/* Portada: titular enorme arriba y, debajo, la foto a sangre. El hilo de la foto sale por la
   derecha y sigue dibujado por toda la página (hilo.js). Las tres piezas llevan su nombre. */
.hero { border-bottom: 0; }
.hero::before { opacity: 0; }
.hero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; max-height: none; padding-block: clamp(2.5rem, 1rem + 5vw, 6rem) clamp(1.5rem, 1rem + 2vw, 3rem); }
.hero__copy { gap: clamp(1.25rem, .8rem + 1.5vw, 2rem); }
.hero__intro { font-size: 1rem; color: var(--naranja); font-weight: 700; }
.hero h1 { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: var(--display); line-height: .86; letter-spacing: -.035em; max-width: none; }
.hero h1 .linea { display: block; }
.hero__statement { font-family: var(--font-sans); font-style: normal; font-weight: 800; font-size: clamp(1.75rem, 1rem + 2.6vw, 3.5rem); line-height: 1.02; letter-spacing: -.035em; color: var(--naranja); max-width: 13ch; }
.hero__lead { font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); max-width: 38ch; color: var(--suave); }
.hero__actions .button { min-height: 4rem; padding-inline: var(--space-6); font-size: 1.125rem; }
.hero__local { font-size: .9375rem; color: var(--secundario); }

.hero__art--editorial { max-width: none; width: 100%; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; overflow: visible; display: grid; gap: var(--space-4); }
.escena { position: relative; display: grid; gap: var(--space-5); }
.escena .hero__image { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 45%; border-radius: 0; }
.escena__marcas { list-style: none; margin: 0 auto; padding: 0; width: var(--wrap); display: grid; gap: var(--space-4); }
.marca { display: grid; gap: .125rem; color: var(--secundario); font-size: .9375rem; line-height: 1.4; }
.marca b { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); line-height: 1.1; color: var(--tinta); }
.marca b::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .625rem; border-radius: 50%; background: var(--naranja); vertical-align: .3em; }
.hero__art--editorial figcaption { width: var(--wrap); margin-inline: auto; padding: 0; border: 0; font-size: .8125rem; color: var(--secundario); }

/* Apertura: un único momento al cargar. Las líneas suben, después aparecen las piezas. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .linea, .hero__statement, .hero__lead, .hero__actions, .marca { animation: subir 900ms cubic-bezier(.2, .8, .2, 1) both; }
  .hero h1 .linea + .linea { animation-delay: 90ms; }
  .hero__statement { animation-delay: 220ms; }
  .hero__lead, .hero__actions { animation-delay: 320ms; }
  .marca--web { animation-delay: 700ms; }
  .marca--consultas { animation-delay: 850ms; }
  .marca--seguimiento { animation-delay: 1000ms; }
}
@keyframes subir { from { opacity: 0; transform: translateY(.6em); } to { opacity: 1; transform: none; } }

@media (min-width: 48rem) {
  /* La foto en banda 2:1: se ven las tres piezas y los bordes se funden con el fondo. */
  .escena { display: block; }
  .escena .hero__image { aspect-ratio: 2 / 1; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); }
  .escena__marcas { position: absolute; inset: 0; width: auto; display: block; }
  .marca { position: absolute; max-width: 15rem; }
  .marca--web { left: 33%; top: 10%; }
  .marca--consultas { left: 47%; top: 21%; }
  .marca--seguimiento { left: 73%; top: 41%; }
}

@media (min-width: 62rem) {
  .hero__copy { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-8); align-items: start; }
  .hero__intro, .hero h1 { grid-column: 1 / -1; }
  .hero__statement { grid-column: 1; grid-row: 3 / span 3; }
  .hero__lead, .hero__actions, .hero__local { grid-column: 2; }
}


/* Titulares de sección: cursiva grande, sin cajas alrededor. */
.section h2, .about h2 { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: var(--titular); line-height: .98; letter-spacing: -.03em; text-wrap: balance; }
.section-head p, .process__head p, .lab__head p { font-size: 1.125rem; }
.services .section-head, .cases .section-head { max-width: 22ch; }
.services, .cases { background: var(--fondo); }
.services__grid, .cases__grid { grid-template-columns: minmax(0, 1fr); }
.services .section-head h2, .cases .section-head h2 { max-width: 16ch; }
.services .section-head, .cases .section-head { max-width: none; }

.service { border-top: 1px solid var(--linea-fuerte); border-radius: 0; background: none; }
.service h3 { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.05; }
.service__icon { stroke: var(--naranja); }

/* Puntos de partida: sin tarjetas, separados por el hilo. */
.solution { background: none; border: 0; border-top: 2px solid var(--naranja); border-radius: 0; padding-inline: 0; }
.solution h3 { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.1; }
.solution__label { color: var(--naranja); font-weight: 700; }

/* Proceso en noche: la banda naranja queda reservada para la oferta. */
.process { background: var(--superficie); color: var(--tinta); }
.process :focus-visible { outline-color: var(--naranja); }
.process__head p, .step p { color: var(--secundario); }
.step__num { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(3rem, 2rem + 3vw, 5rem); line-height: 1; color: var(--naranja); letter-spacing: -.02em; }
.step h3 { font-size: clamp(1.5rem, 1.2rem + .8vw, 2rem); }
.step::before { background: var(--naranja); opacity: 1; }
.step::after { border-color: var(--naranja); background: var(--superficie); }
.step:last-child::after { background: var(--naranja); }

/* Oferta: la única banda naranja, a sangre. El precio, enorme. */
.offer { background: var(--naranja); color: var(--noche); }
.offer :focus-visible { outline-color: var(--noche); }
.offer__title { color: var(--noche); max-width: 16ch; }
.offer__grid { gap: clamp(2rem, 1rem + 3vw, 4rem); }
.plan { padding: 0; background: none; box-shadow: none; border: 0; border-radius: 0; color: var(--noche); }
.plan h3 { color: var(--noche); font-family: var(--font-sans); font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; }
.plan__intro, .plan__fine, .plan__from, .plan p, .plan--care .plan__intro, .plan--care .plan__fine { color: var(--noche); }
.plan__price strong { color: var(--noche); font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(5.5rem, 1rem + 17vw, 17rem); line-height: .82; letter-spacing: -.035em; }
.plan__price--small strong { font-size: clamp(3.25rem, 1.5rem + 6vw, 7rem); }
.plan__from { font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); font-weight: 800; }
.plan__list { border-top-color: color-mix(in srgb, var(--noche) 35%, transparent); }
.plan__list li::before { border-color: var(--noche); }
.plan--main .button { background: var(--noche); color: var(--tinta); border-color: var(--noche); min-height: 3.75rem; }
.plan--main .button:hover { background: #17344F; color: var(--tinta); }
.plan--care { border-top: 2px solid var(--noche); padding-top: var(--space-6); }
.offer__note { color: var(--noche); }
.offer a:not(.button) { color: var(--noche); }

.delivery article h3 { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); }

.case { border-top: 2px solid var(--naranja); }
.case dt { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.375rem, 1.1rem + .8vw, 1.875rem); }

/* Sobre Enhebro: la frase más grande de la página después de la portada. */
.about { background: var(--fondo); }
.about h2 { font-size: clamp(3rem, 1.2rem + 6vw, 7.5rem); max-width: 13ch; line-height: .95; }
.about__text p:first-child { font-size: 1.25rem; color: var(--tinta); }

.lab__shell { border-color: var(--naranja); }
.faq__grid h2 { font-family: var(--font-serif); font-style: italic; }

@media (min-width: 62rem) {
  .services__grid, .cases__grid { grid-template-columns: minmax(0, 1fr); }
  .offer__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; }
}

/* Una sola columna: el titular encima, sin cabecera fija ni columna implícita. */
.services .section-head { position: static; }
.cases__more { grid-column: auto; }
@media (min-width: 62rem) {
  .cases__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.plan__price { margin-bottom: var(--space-3); }
.plan__price--small strong { white-space: nowrap; font-size: clamp(3rem, 1.5rem + 4vw, 5.25rem); }

/* La foto queda debajo del hilo para que se vea la continuación. */
.hero__art--editorial { z-index: 1; }
/* Servicios en tres columnas en pantallas anchas. */
@media (min-width: 62rem) {
  .services__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-7); border-top: 0; }
  .service { align-content: start; }
}

/* Escritorio ancho: menos aire arriba para que la foto asome en la primera pantalla. */
@media (min-width: 75rem) {
  .hero__inner { padding-block: clamp(2.5rem, 1rem + 2.5vw, 4rem) var(--space-6); }
}
@media (min-width: 62rem) {
  .service h3 { font-size: clamp(1.5rem, 1rem + 1vw, 1.875rem); hyphens: manual; overflow-wrap: normal; word-break: normal; }
}

/* Lectura: el texto corrido no baja de 1 rem en los bloques de contenido. */
.solution p, .solution li, .delivery article p, .case dd, .step p, .service p, .cases__more { font-size: 1rem; line-height: 1.6; }
@media (max-width: 47.99rem) {
  .hilo path { stroke-width: 3; }
  /* Aire bajo la portada para que el hilo cruce sin pasar por el pie de foto. */
  .hero__art--editorial { padding-bottom: 7rem; }
}

/* Subapartados de los textos legales (condiciones y reembolsos). */
.legal__body h3 { margin: 1.75rem 0 0; font-size: 1.125rem; line-height: 1.35; }