/* Elvira Martí — hoja de estilos única. Rehecha a mano desde la web de Builderall (2026-09-25):
   mismos colores, fuentes y bloques, sin JavaScript. Tamaños medidos sobre el original (2026-10-07): allí la
   familia "Montserrat" solo tiene la Regular (500 = Regular, 700 = negrita sintética) y los subtítulos usan
   "Montserrat Semi Bold"; aquí 400 hace de Regular y 600 de ambas negritas. Los degradados del original
   (botones, franjas) van en ciruela liso a petición de la dueña. */

@font-face { font-family: "Lovelo"; src: url("/fuentes/lovelo.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/fuentes/montserrat-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/fuentes/montserrat-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
/* Letra de firma, recortada a las letras de "Elvira Marti" y "Tu Calma No Puede Esperar": otra frase necesita volver a recortarla. */
@font-face { font-family: "Gistesy"; src: url("/fuentes/gistesy.woff2") format("woff2"); font-display: swap; }

:root {
  --ciruela: #590840;
  --lavanda: #7d5ba6;
  --crema: #f6f4f0;
  --tinta: #000;
  --borde: #d8cce6;
  --violeta: #46125d;
  --orquidea: #8e44ad;
  --titulos: "Lovelo", "Montserrat", Arial, sans-serif;
  --texto: "Montserrat", Arial, sans-serif;
  --ancho: 1140px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--texto); font-size: clamp(17px, 16px + .45vw, 22px); line-height: 1.6; color: var(--tinta); background: var(--crema); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ciruela); }
p { margin: 0 0 1em; }
strong, b { font-weight: 600; }

/* ---------- Tipografía ---------- */
.titulo { font-family: var(--titulos); font-weight: 400; text-transform: uppercase; line-height: 1.2; margin: 0 0 .5em; letter-spacing: .01em; }
.t-xl { font-size: clamp(2rem, 4.4vw, 2.85rem); }
.t-l { font-size: clamp(1.7rem, 3.4vw, 2.2rem); }
.t-m { font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
.t-s { font-size: clamp(1.15rem, 2vw, 1.5rem); }
.sub { font-weight: 600; color: var(--ciruela); font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.25; margin: 0 0 .6em; }
.antetitulo { font-size: clamp(1.2rem, 2.4vw, 1.8rem); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; }
.lavanda { color: var(--lavanda); }
.antetitulo-ligero { font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.35; }
.destacado { font-size: clamp(1.1rem, 1.8vw, 1.5625rem); font-weight: 600; line-height: 1.25; }
.grande-texto { font-size: clamp(1.2rem, 2.4vw, 1.8rem); line-height: 1.25; }
.violeta { color: var(--violeta); }
.mayus { text-transform: uppercase; }
.mayus-texto { font-family: var(--texto); font-weight: 600; font-size: .86em; }
.ciruela { color: var(--ciruela); }
.blanco { color: #fff; }
.centro { text-align: center; }
.justificado p, .justificado li, p.justificado { text-align: justify; }
.pequeno { font-size: .92rem; }
.cursiva { font-style: italic; }
.firma { font-family: "Gistesy", cursive; font-weight: 400; text-transform: none; line-height: 1.1; margin: 0 0 .2em; }
/* Camino del Cisne: en el original toda la página va a 20 px (el resto, a 22). */
.pagina-caminodelcisne .seccion { font-size: clamp(16px, 15px + .35vw, 20px); }
.sub.pregunta { font-size: 1.1em; margin-top: 1.4em; }
.texto-18 { font-size: clamp(16px, 15px + .25vw, 18px); }

/* ---------- Estructura ---------- */
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 22px; }
.estrecho { max-width: 780px; }
.medio { max-width: 1000px; }
.seccion { padding: 44px 0; }
.seccion.compacta { padding: 24px 0; }
.seccion.pegada { padding: 0; }
.seccion.pegada .dos-col > div { padding: 36px 0; }
/* Dos secciones seguidas con el mismo fondo se leen como una: sin doble margen entre ellas. */
.fondo-crema + .seccion.fondo-crema, .fondo-blanco + .seccion.fondo-blanco { padding-top: 10px; }
.fondo-crema { background: var(--crema); }
.fondo-blanco { background: #fff; }
.fondo-ciruela { background: var(--ciruela); color: #fff; }
/* Arriba y no al centro: las figuras de las fotos de fondo tocan el borde superior y, en pantallas anchas, cover
   recortaría la cabeza; así lo que sobra se recorta por abajo. */
.fondo-foto { background-size: cover; background-position: center top; position: relative; }
.fondo-foto::before { content: ""; position: absolute; inset: 0; background: rgba(246, 244, 240, .15); }
.fondo-foto > * { position: relative; }

.franja { background: var(--ciruela); color: #fff; padding: 22px 0; text-align: center; }
.franja .titulo { margin: 0; }
.franja p { margin: .35em 0 0; font-weight: 600; font-size: clamp(1.05rem, 2vw, 1.625rem); line-height: 1.2; }
.franja p.ligero { font-weight: 400; font-size: 1em; line-height: 1.6; max-width: 600px; margin-inline: auto; }

.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.dos-col.foto-estrecha { grid-template-columns: 2fr 3fr; }
.dos-col.ancha-derecha { grid-template-columns: 1fr 1.2fr; }
/* Portada: la foto a su tamaño, pegada abajo y saliéndose un poco del ancho (como en el original); el texto
   centrado en vertical en el hueco que queda. */
.seccion.heroe { padding: 0; overflow: hidden; }
.dos-col.portada { grid-template-columns: auto 1fr; gap: 20px; }
.dos-col.portada > img { max-width: none; margin-left: -160px; align-self: end; }
.dos-col.portada > div { padding: 30px 0; }
.dos-col.portada.invertido { grid-template-columns: 1fr auto; }
.dos-col.portada.invertido > img { margin-left: 0; margin-right: -160px; }
.dos-col.foto-estrecha.invertido { grid-template-columns: 3fr 2fr; }
.dos-col.invertido > :first-child { order: 2; }
.tres-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

/* Foto a sangre (como en el original): la foto va desde el borde de la ventana hasta --foto px dentro de la
   columna de 1140 y ocupa todo el alto de la sección; el texto, al otro lado, se alinea con la columna.
   height: 0 + min-height: 100% para que la foto no estire la fila con su alto natural. */
.sangre { --foto: 340px; --margen: max(22px, calc((100vw - var(--ancho)) / 2 + 22px)); display: grid; grid-template-columns: max(260px, calc((100vw - var(--ancho)) / 2 + var(--foto))) 1fr; }
.sangre > img { width: 100%; height: 0; min-height: 100%; object-fit: cover; object-position: var(--foco, center); }
.sangre > .texto { padding: 44px var(--margen) 44px 40px; }
.sangre.derecha { grid-template-columns: 1fr max(260px, calc((100vw - var(--ancho)) / 2 + var(--foto))); }
.sangre.derecha > img { order: 2; }
/* .ajustada: la foto entera, a su proporción y sin recortar (no se estira al alto del texto); --alinear la pega
   arriba, al centro o abajo del bloque. Para fotos de persona recortada o cuando el texto es mucho más alto. */
.sangre.ajustada > img { height: auto; min-height: 0; object-fit: contain; align-self: var(--alinear, center); }
.sangre.derecha > .texto { padding: 44px 40px 44px var(--margen); }

/* Foto con recuadro ciruela desplazado detrás */
.foto-marco { position: relative; }
.foto-marco::after { content: ""; position: absolute; top: 4%; bottom: -4%; right: -30px; width: 45%; background: var(--ciruela); z-index: 0; }
.foto-marco img { position: relative; z-index: 1; }

/* ---------- Tarjetas y bandas ---------- */
.tarjeta .sub, .sub.grande-sub { font-size: clamp(1.4rem, 3vw, 2.2rem); }
.sub.chico { font-size: 1em; }
.tarjeta .sub.pequeno-sub { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.tarjeta { background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(89, 8, 64, .45); padding: 40px 44px; }
/* Recuadro de borde fino lavanda y texto lavanda en seminegrita (cierre de "Sobre mí"). */
.recuadro { border: 1px solid #8b7bd8; padding: 26px 40px 20px; color: var(--lavanda); font-weight: 600; }
.recuadro p { margin-bottom: .9em; }
.tarjeta.translucida { background: rgba(255, 255, 255, .72); }
.banda-ciruela { background: linear-gradient(var(--crema) 0 13%, var(--ciruela) 13% 85%, var(--crema) 85% 100%); }

/* ---------- Listas ---------- */
.lista { list-style: none; padding: 0; margin: 0 0 1em; }
.lista li { position: relative; padding-left: 1.6em; margin-bottom: .85em; }
.lista li::before { position: absolute; left: 0; top: .05em; }
.lista.flechas li::before { content: ""; width: 1em; height: 1em; top: .3em; background: var(--violeta); -webkit-mask: url("/img/iconos/arrow-right-circle-outline.svg") center / contain no-repeat; mask: url("/img/iconos/arrow-right-circle-outline.svg") center / contain no-repeat; }
/* Cada <li> lleva su icono: class="i-<nombre>" (ver Iconos) o class="emoji" data-emoji="✨". */
.lista.iconos li::before { content: ""; width: 1em; height: 1em; top: .3em; background: var(--orquidea); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.lista.iconos li.emoji::before { content: attr(data-emoji); background: none; -webkit-mask: none; mask: none; font-size: .9em; top: .1em; }
.lista.rayos li::before { content: "⚡"; font-size: .9em; }
.lista.checks li::before { content: "✔"; color: var(--lavanda); }
.lista.dos-columnas { columns: 2; column-gap: 48px; }
.lista.dos-columnas li { break-inside: avoid; }

/* ---------- Citas / separadores ---------- */
.linea-vertical { border-left: 3px solid var(--ciruela); padding-left: 24px; }
.cita { font-style: italic; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-width: 350px; max-width: 100%; min-height: 40px;
  background: var(--ciruela); color: #fff; text-decoration: none; text-align: center;
  font-family: var(--titulos); text-transform: uppercase; font-size: clamp(1.15rem, 1.6vw, 1.375rem); line-height: 1.15; letter-spacing: .02em;
  padding: 3px 26px; border-radius: 5px; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .5);
}
.boton:hover { filter: brightness(1.25); }
.boton-caja { text-align: center; margin: 26px 0 8px; }
.nota-boton { font-style: italic; font-size: clamp(.95rem, 1.2vw, 1.125rem); margin-top: 10px; text-align: center; }

/* ---------- Iconos (Material Design Icons, los mismos del original; SVG propios en /img/iconos) ---------- */
/* class="ico i-<nombre>": icono antes del texto; en un .boton va detrás, como en el original. */
.ico::before { content: ""; display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -.15em; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.boton.ico::before { order: 2; }
.i-whatsapp { --ico: url("/img/iconos/whatsapp.svg"); }
.i-flecha { --ico: url("/img/iconos/arrow-right-bold-outline.svg"); }
.i-libro { --ico: url("/img/iconos/library.svg"); }
.i-correo { --ico: url("/img/iconos/email-multiple-outline.svg"); }
.i-sobre { --ico: url("/img/iconos/email-variant.svg"); }
.i-tarjeta { --ico: url("/img/iconos/smart-card.svg"); }
.i-reloj { --ico: url("/img/iconos/alarm.svg"); }
.i-reloj-ok { --ico: url("/img/iconos/alarm-check.svg"); }
.i-corazones { --ico: url("/img/iconos/heart-multiple.svg"); }
.i-reactivar { --ico: url("/img/iconos/account-reactivate.svg"); }
.orquidea { color: var(--orquidea); }

/* ---------- Cabecera ---------- */
.cabecera { background: #fff; position: sticky; top: 0; z-index: 10; box-shadow: 0 1px 6px rgba(0, 0, 0, .06); }
.cabecera .contenedor { display: flex; align-items: center; gap: 24px; min-height: 58px; }
.marca { display: flex; align-items: center; gap: 4px; flex: none; }
.marca img { height: 50px; width: auto; }
.menu { display: flex; gap: 6px 54px; margin-left: auto; flex-wrap: wrap; }
.menu a { color: var(--ciruela); text-decoration: none; font-size: 16px; font-weight: 600; }
.menu a:hover, .menu a[aria-current] { color: var(--lavanda); }
.menu-movil { display: none; margin-left: auto; }
.menu-movil summary { list-style: none; cursor: pointer; color: var(--ciruela); font-weight: 600; padding: 8px 14px; border: 1px solid var(--borde); border-radius: 6px; }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; padding: 8px 22px 16px; box-shadow: 0 8px 16px rgba(0, 0, 0, .1); }
.menu-movil[open] nav { display: flex; flex-direction: column; }
.menu-movil nav a { color: var(--ciruela); text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--crema); }

/* ---------- Pie ---------- */
.pie { background: var(--ciruela); color: #fff; padding: 22px 0 18px; font-size: 16px; }
.pie a { color: #fff; text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie-rejilla { display: grid; grid-template-columns: 1.35fr 1fr 1.2fr .85fr; gap: 24px; }
.pie h2 { font-size: 16px; font-weight: 600; margin: 8px 0 22px; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 26px; line-height: 1.5; }
.pie .logo-pie { width: 287px; margin: 0 0 8px -20px; max-width: none; }
.pie .contacto-pie { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 18px; }
.pie .contacto-pie.ico::before { width: 28px; height: 28px; }
.pie .redes { display: flex; gap: 40px; margin-top: 22px; }
.pie .redes img { width: 46px; height: 46px; }
.pie .copy { text-align: center; margin: 4px 0 0; font-size: 18px; }

/* ---------- Texto legal ---------- */
.legal h2 { font-family: var(--texto); font-weight: 600; color: var(--ciruela); font-size: 1.2rem; margin: 1.6em 0 .6em; }
.legal { font-size: 16px; }

/* ---------- Móvil ---------- */
@media (max-width: 900px) {
  .menu { display: none; }
  .menu-movil { display: block; }
  .dos-col, .dos-col.portada, .dos-col.portada.invertido, .dos-col.foto-estrecha, .dos-col.foto-estrecha.invertido, .tres-col, .pie-rejilla { grid-template-columns: 1fr; gap: 30px; }
  .dos-col.invertido > :first-child { order: 0; }
  .sangre, .sangre.derecha { grid-template-columns: 1fr; }
  .sangre > img { height: auto; min-height: 0; max-height: 420px; }
  .sangre.ajustada > img { max-height: none; width: min(100%, 420px); justify-self: center; }
  .sangre.derecha > img { order: 0; }
  .sangre > .texto, .sangre.derecha > .texto { padding: 30px 22px; }
  .dos-col.portada > img, .dos-col.portada.invertido > img { width: 100%; max-width: 521px; margin: 0 auto; }
  .dos-col.portada > div { padding: 30px 0 0; }
  .foto-marco::after { right: -12px; }
  .tarjeta { padding: 28px 22px; }
  .seccion { padding: 36px 0; }
  .pie .logo-pie { margin-left: 0; }
  .lista.dos-columnas { columns: 1; }
  .justificado p, .justificado li, p.justificado { text-align: left; }
  .banda-ciruela { background: linear-gradient(var(--crema) 0 6%, var(--ciruela) 6% 94%, var(--crema) 94% 100%); }
}

/* Logos pequeños encima de un título */
.logo-seccion { margin: 0 auto 10px; width: 126px; }
.logo-seccion.logo-grande { width: 182px; }
.dimensiones h3 { margin-top: 1.4em; margin-bottom: .3em; }
.dimensiones h3:first-child { margin-top: 0; }
.trazo { margin: 0 auto; width: 251px; }
.foto-redonda { width: 158px; border-radius: 50%; margin: 0 auto 18px; }
.portada-manual { margin: 18px auto 0; }
.formulario-captura { width: 100%; min-height: 560px; border: 0; }
/* Caja con un texto legal servido por Iris (p. ej. /t/vigente): todo el ancho de la ventana (con un margen mínimo)
   y toda la altura de la pantalla, con su propio scroll dentro. dvh descuenta la barra del navegador del móvil. */
.caja-legal-marco { padding: 0 8px; margin: 1em auto .8em; max-width: 1100px; }
.caja-legal { display: block; width: 100%; height: 100vh; height: 100dvh; min-height: 480px; border: 1px solid #e6dde3; border-radius: 10px; background: #fff; }

/* ---------- Link in bio (página suelta, sin cabecera ni pie) ---------- */
.lb { max-width: 540px; margin: 0 auto; padding: 18px 20px 30px; text-align: center; }
.lb-foto { width: 150px; margin: 0 auto; }
.lb-firma { font-family: "Gistesy", cursive; font-weight: 400; color: var(--ciruela); font-size: 2.3rem; line-height: 1; margin: -12px 0 14px; position: relative; }
.lb-lema { font-size: 1.2rem; line-height: 1.5; margin: 0 0 38px; }
.lb-lema span { font-family: var(--titulos); color: #e1ba6f; text-transform: uppercase; }
.lb-boton { display: flex; align-items: center; justify-content: center; gap: .4em; width: 100%; min-height: 40px; padding: 5px 14px; border-radius: 20px; background: var(--ciruela); color: #fff; font-weight: 600; font-size: 1.15rem; line-height: 1.2; text-transform: uppercase; text-decoration: none; transition: background .2s, color .2s; }
.lb-boton:hover, .lb-boton:focus-visible { background: #e1ba6f; color: #590854; }
.lb-boton.pequeno { width: 300px; max-width: 100%; min-height: 30px; margin: 0 auto 32px; font-size: .95rem; }
.lb-icono { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }
.lb-nota { font-size: 1rem; margin: 6px 0 30px; }
.lb-titulo { font-family: var(--titulos); font-weight: 400; color: var(--ciruela); font-size: 1.9rem; margin: 30px 0 22px; }
.lb-logo { width: 155px; margin: 0 auto; }
@media (max-width: 600px) {
  .lb-boton { font-size: .8rem; }
  .lb-boton.pequeno { width: 190px; font-size: .68rem; margin-bottom: 38px; }
  .lb-nota { font-size: .8rem; }
  .lb-lema { font-size: 1rem; }
  .lb-firma { font-size: 1.7rem; margin-top: -8px; }
}