/* =============================================================================
   Sitio de marketing (página principal + catálogo + opiniones). Paleta de
   Bella Invitación: rosa, dorado, azul noche y salvia, con modo claro y oscuro
   via [data-theme] + prefers-color-scheme.

   Dos niveles de tokens, y la distinción importa:
     · Colores CRUDOS de marca (--mk-blush, --mk-night, --mk-gold-fill, ...):
       son la marca y valen lo mismo en los dos temas.
     · Tokens de ROL (--mk-bg, --mk-ink, --mk-gold, --mk-brand-soft, ...):
       cambian con el tema. TODO lo que se pinte debe usar estos.
   Pintar con un color crudo es lo que rompe el modo oscuro.

   Independiente del sistema --tpl-* de las invitaciones, que vive en
   invitacion.css: aquí solo están los tokens del "chrome" del sitio.
   ============================================================================= */

:root{
  /* ---- Paleta de marca Bella Invitación ---- */
  --mk-blush:#f8e7e7;        /* rosa principal */
  --mk-blush-deep:#f3d9d9;   /* rosa medio */
  --mk-gold-fill:#d4af7c;    /* dorado de marca — SOLO rellenos, bordes y adornos */
  --mk-night:#1f2937;        /* azul noche */
  --mk-sage:#a7b3a7;         /* verde salvia */

  /* ---- Roles derivados ---- */
  --mk-bg:#fdfaf9;
  --mk-bg-soft:#f8e7e7;
  --mk-panel:#ffffff;
  --mk-ink:#1f2937;
  --mk-ink-dim:#69737f;
  --mk-brand-soft:#9d5c63;   /* rosa profundo: enlaces, precios, acentos de texto */
  --mk-on-brand-soft:#ffffff;
  /* El dorado de marca da 2:1 de contraste sobre blanco, así que como TEXTO se
     usa esta versión oscurecida. El tono se eligió para pasar 4.5:1 también
     sobre la superficie rosa (--mk-bg-soft), que es el fondo más claro donde
     aparece: sobre blanco da 5.6:1 y sobre el rosa 4.7:1. El dorado de marca
     vive en --mk-gold-fill y solo se usa como relleno o borde. */
  --mk-gold:#856134;
  --mk-gold-soft:#856134;
  --mk-on-brand:#fdfaf9;
  --mk-line:rgba(31,41,55,.13);
  --mk-shadow:0 18px 40px -20px rgba(31,41,55,.18);
  /* El encabezado de la marca es claro (rosa/crema con texto oscuro), al
     contrario del anterior que era vino oscuro con texto blanco. */
  --mk-hero-grad:linear-gradient(165deg,#fdfaf9 0%,#f8e7e7 58%,#f3d9d9 100%);
  --mk-hero-ink:#1f2937;
  --mk-hero-ink-dim:#5c6673;
  --mk-hero-line:rgba(31,41,55,.28);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --mk-bg:#141a22;
    --mk-bg-soft:#1b232e;
    --mk-panel:#1f2937;
    --mk-ink:#f5efed;
    --mk-ink-dim:#a6b0bb;
    --mk-brand-soft:#e8b0b0;
    --mk-on-brand-soft:#1f2937;
    --mk-gold:#e2c08d;
    --mk-gold-soft:#e2c08d;
    --mk-gold-fill:#d4af7c;
    --mk-on-brand:#1f2937;
    --mk-line:rgba(212,175,124,.2);
    --mk-shadow:0 18px 44px -18px rgba(0,0,0,.6);
    --mk-hero-grad:linear-gradient(165deg,#1b232e 0%,#2a2129 55%,#33262c 100%);
    --mk-hero-ink:#f5efed;
    --mk-hero-ink-dim:#b8c1cb;
    --mk-hero-line:rgba(245,239,237,.35);
  }
}
:root[data-theme="dark"]{
    --mk-bg:#141a22;
  --mk-bg-soft:#1b232e;
  --mk-panel:#1f2937;
  --mk-ink:#f5efed;
  --mk-ink-dim:#a6b0bb;
  --mk-brand-soft:#e8b0b0;
  --mk-on-brand-soft:#1f2937;
  --mk-gold:#e2c08d;
  --mk-gold-soft:#e2c08d;
  --mk-gold-fill:#d4af7c;
  --mk-on-brand:#1f2937;
  --mk-line:rgba(212,175,124,.2);
  --mk-shadow:0 18px 44px -18px rgba(0,0,0,.6);
  --mk-hero-grad:linear-gradient(165deg,#1b232e 0%,#2a2129 55%,#33262c 100%);
  --mk-hero-ink:#f5efed;
  --mk-hero-ink-dim:#b8c1cb;
  --mk-hero-line:rgba(245,239,237,.35);
}

.wrap{max-width:640px;margin:0 auto;padding:0 24px}
.dim{opacity:.85}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--mk-bg);color:var(--mk-ink);font-family:'Montserrat',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.eyebrow{text-transform:uppercase;letter-spacing:.3em;font-size:11.5px;color:var(--mk-gold);font-weight:600}
.eyebrow.center{text-align:center}
.center{text-align:center}

/* Toggle claro/oscuro */
.theme-toggle{
  position:fixed;top:16px;right:16px;z-index:50;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--mk-line);
  background:var(--mk-panel);color:var(--mk-ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  box-shadow:var(--mk-shadow);
}
.theme-toggle .ico-moon{display:none}
:root[data-theme="dark"] .theme-toggle .ico-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ico-moon{display:inline}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .ico-sun{display:none}
  :root:not([data-theme="light"]) .theme-toggle .ico-moon{display:inline}
}

/* Nav */
.nav{position:sticky;top:0;z-index:30;background:var(--mk-bg);border-bottom:1px solid var(--mk-line)}
.nav-wrap{max-width:1100px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
/* ---- Logotipo (ver views/_brand.ejs) ----
   El sobre es SVG en línea con currentColor: hereda el tema y escala sin
   archivos. "Bella" va en Allura, la tipografía del logotipo del manual de
   marca; el resto del sitio usa Playfair Display y Montserrat. */
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--mk-ink)}
.brand-mark{width:36px;height:26px;color:var(--mk-gold-fill);flex-shrink:0}
.brand-mark svg{width:100%;height:100%;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{
  font-family:'Allura',cursive;font-size:31px;line-height:.82;
  color:var(--mk-ink);position:relative;white-space:nowrap;
}
.brand-heart{font-family:'Montserrat',sans-serif;font-size:11px;color:var(--mk-brand-soft);margin-left:2px;vertical-align:super}
.brand-sub{
  font-family:'Montserrat',sans-serif;font-size:8.5px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--mk-ink-dim);
  margin-top:3px;padding-left:2px;
}
.brand-tagline{
  font-family:'Montserrat',sans-serif;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mk-ink-dim);margin:14px 0 0;
}
.nav nav{display:flex;gap:22px;flex-wrap:wrap}
.nav nav a{font-size:14px;color:var(--mk-ink-dim);font-weight:500}
.nav nav a:hover{color:var(--mk-brand-soft)}

/* El menú no tenía NINGUNA regla para pantallas chicas: el logotipo y los
   enlaces competían por el mismo renglón y terminaban encimados o cortados.
   Ahora el logotipo manda en su renglón y los enlaces pasan abajo, centrados
   y con espacio para el dedo. */
@media(max-width:700px){
  .nav-wrap{
    flex-direction:column;align-items:center;gap:12px;padding:14px 18px 12px;
  }
  .nav nav{
    width:100%;justify-content:center;gap:8px;flex-wrap:wrap;
  }
  .nav nav a{
    font-size:13px;padding:7px 13px;border-radius:99px;
    border:1px solid var(--mk-line);background:var(--mk-panel);
  }
  .nav nav a:hover{border-color:var(--mk-gold-fill)}
  /* El botón de tema se sube para no encimarse con el menú ya apilado */
  .theme-toggle{top:10px;right:10px;width:36px;height:36px}
}
@media(max-width:380px){
  .nav nav a{font-size:12px;padding:6px 10px}
  .brand-name{font-size:27px}
}

/* Hero */
.hero{background:var(--mk-hero-grad);color:var(--mk-hero-ink);padding-block:100px 70px}
.hero-wrap{max-width:720px;margin:0 auto;padding:0 24px;text-align:center}
.hero .eyebrow{color:var(--mk-gold-soft);margin-bottom:16px}
.hero h1{font-size:clamp(34px,6vw,54px);line-height:1.12;color:var(--mk-hero-ink)}
.hero .lead{margin:20px auto 0;max-width:540px;color:var(--mk-hero-ink-dim);font-size:16px;line-height:1.6}
.hero-cta{display:flex;gap:14px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 26px;border-radius:99px;font-size:14px;font-weight:600;letter-spacing:.02em;transition:transform .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--mk-gold-fill);color:var(--mk-night)}
.btn-ghost{border:1px solid var(--mk-hero-line);color:var(--mk-hero-ink)}

/* Tira de tipos de evento */
.events-strip{padding-block:34px;background:var(--mk-bg-soft);border-bottom:1px solid var(--mk-line)}
.events-wrap{max-width:1000px;margin:0 auto;padding:0 24px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.event-pill{display:flex;align-items:center;gap:8px;border:1px solid var(--mk-line);background:var(--mk-panel);padding:9px 18px;border-radius:99px;font-size:14px;font-weight:500;box-shadow:var(--mk-shadow)}
.event-pill:hover{border-color:var(--mk-gold-fill);color:var(--mk-brand-soft)}

/* Features */
.features{padding-block:70px}
.features-wrap{max-width:1000px;margin:0 auto;padding:0 24px;display:grid;gap:26px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.features-wrap{grid-template-columns:repeat(4,1fr)}}
.feature{text-align:center;padding:22px 14px}
.feature-ico{font-size:28px;margin-bottom:12px}
.feature h3{font-size:16px;margin-bottom:8px}
.feature p{font-size:13.5px;color:var(--mk-ink-dim);line-height:1.55;margin:0}

/* Planes */
/* ---- Cómo comprar ---- */
.steps{padding-block:70px}
.steps-wrap{max-width:1000px;margin:0 auto;padding:0 24px}
.steps h2{font-size:clamp(26px,4vw,32px);margin:10px 0 40px}
.steps-list{list-style:none;margin:0;padding:0;display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));counter-reset:paso}
.steps-list li{position:relative;padding-top:6px}
/* Usa tokens de ROL (--mk-bg-soft / --mk-gold), no los colores crudos de
   marca: --mk-blush es rosa claro en los dos temas, así que en modo oscuro
   daba rosa claro sobre rosa claro y el número no se leía. */
.step-n{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:var(--mk-bg-soft);color:var(--mk-gold);
  font-family:'Playfair Display',serif;font-size:17px;font-weight:600;
  border:1px solid var(--mk-gold-fill);margin-bottom:14px;
}
.steps-list h3{font-size:17px;line-height:1.3;margin-bottom:8px;color:var(--mk-ink)}
.steps-list p{font-size:13.5px;line-height:1.65;color:var(--mk-ink-dim);margin:0}
.steps-note{
  text-align:center;margin:38px 0 0;font-size:13px;color:var(--mk-ink-dim);
  border-top:1px solid var(--mk-line);padding-top:22px;
}

/* ---- Planes ---- */
.plans-lead{max-width:520px;margin:-26px auto 38px;font-size:14.5px;line-height:1.6;color:var(--mk-ink-dim)}
.plan-for{font-size:13px;line-height:1.55;color:var(--mk-ink-dim);margin:14px 0 0;font-style:italic}
.plan li strong{color:var(--mk-ink);font-weight:600}
.plan li em{font-style:normal;color:var(--mk-brand-soft)}
.plans-note{text-align:center;margin:34px auto 0;max-width:520px;font-size:12.5px;line-height:1.6;color:var(--mk-ink-dim)}
/* Dos paquetes: en pantalla ancha se muestran a la par y centrados, no
   estirados a todo el ancho como cuando eran tres. */
/* Dos paquetes, no tres: se muestran a la par y CENTRADOS. Antes quedaba una
   regla de 3 columnas más abajo en el archivo que ganaba por orden, así que
   las dos tarjetas ocupaban 2 de 3 columnas y salían angostas y cargadas a la
   izquierda. */
@media(min-width:720px){
  .plans-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px;margin-inline:auto}
}

.plans{padding-block:70px;background:var(--mk-bg-soft);border-top:1px solid var(--mk-line);border-bottom:1px solid var(--mk-line)}
.plans-wrap{max-width:1000px;margin:0 auto;padding:0 24px}
.plans h2{font-size:32px;margin-top:10px;margin-bottom:40px}
.plans-grid{display:grid;gap:22px}
.plan{background:var(--mk-panel);border:1px solid var(--mk-line);border-radius:14px;padding:28px;box-shadow:var(--mk-shadow)}
.plan.highlight{border-color:var(--mk-gold-fill);position:relative;transform:translateY(-6px)}
.plan .tag{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--mk-gold);display:flex;align-items:center;gap:8px;font-weight:700}
.plan .badge{background:var(--mk-brand-soft);color:var(--mk-on-brand-soft);font-size:10px;padding:3px 9px;border-radius:99px;letter-spacing:.04em;text-transform:none}
.plan .price{font-family:'Playfair Display',serif;font-size:34px;color:var(--mk-brand-soft);margin-top:10px}
.plan .price small{font-size:13px;color:var(--mk-ink-dim);font-family:'Montserrat',sans-serif;margin-left:4px}
.plan ul{list-style:none;padding:0;margin:20px 0 0;font-size:13.5px;color:var(--mk-ink-dim)}
.plan li{margin-top:10px;padding-left:20px;position:relative}
.plan li::before{content:"✦";position:absolute;left:0;color:var(--mk-gold)}

/* Footer */
.site-footer{padding:44px 24px;text-align:center;font-size:13px;color:var(--mk-ink-dim)}
.site-footer a{color:var(--mk-brand-soft);font-weight:600}
.site-footer p{margin:6px 0}

/* -----------------------------------------------------------------------
   Catálogo de plantillas (/plantillas)
   ----------------------------------------------------------------------- */
.catalog-hero{background:var(--mk-hero-grad);color:var(--mk-hero-ink);padding-block:70px 44px;text-align:center}
.catalog-hero h1{color:var(--mk-hero-ink);font-size:clamp(28px,5vw,42px)}
.catalog-hero p{color:var(--mk-hero-ink-dim);max-width:520px;margin:14px auto 0}

.catalog-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:30px 24px 0;max-width:1000px;margin:0 auto}
.catalog-filters a{border:1px solid var(--mk-line);padding:8px 16px;border-radius:99px;font-size:13.5px;font-weight:500;background:var(--mk-panel)}
.catalog-filters a.active{background:var(--mk-brand-soft);color:var(--mk-on-brand-soft);border-color:var(--mk-brand-soft)}

.catalog-section{max-width:1200px;margin:0 auto;padding:56px 24px 0}
.catalog-section:last-of-type{padding-bottom:24px}
.catalog-section-head{text-align:center;max-width:560px;margin:0 auto}
.catalog-section-head h2{font-family:'Playfair Display',serif;font-style:italic;font-weight:600;font-size:clamp(22px,3.4vw,30px);margin:0}
.catalog-section-head .squiggle{color:var(--mk-gold);letter-spacing:-1px;font-size:15px;margin:10px 0;overflow:hidden;white-space:nowrap;opacity:.85}
.catalog-section-head p{font-size:14px;color:var(--mk-ink-dim);margin:0}

.catalog-grid{max-width:1200px;margin:0 auto;padding:36px 24px 80px;display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.catalog-section .catalog-grid{padding-top:32px}
.tpl-card{background:var(--mk-panel);border:1px solid var(--mk-line);border-radius:16px;overflow:hidden;box-shadow:var(--mk-shadow);display:flex;flex-direction:column}

/* Miniatura EN VIVO: dos iframes del mismo diseño real (no una captura
   estática ni un color inventado aparte), escalados hacia abajo con
   transform:scale — la técnica estándar para "capturar" una página como
   thumbnail sin necesitar un servicio externo de screenshots. Se muestran
   dentro de dos marcos tipo dispositivo (uno grande atrás + uno chico al
   frente, más acercado) para que la tarjeta se sienta como el mockup de
   "tablet + teléfono" de un catálogo de plantillas. */
/* Vista previa: UNA sola maqueta de teléfono, centrada. Antes eran dos
   marcos traslapados (tableta + teléfono) y por tanto dos iframes por
   tarjeta — con 52 plantillas, 104 invitaciones vivas en una página. */
.tpl-card-preview{
  position:relative;height:320px;overflow:hidden;
  background:linear-gradient(170deg,var(--mk-bg-soft),var(--mk-panel));
  display:flex;align-items:center;justify-content:center;
}
.device{
  position:relative;width:168px;height:290px;overflow:hidden;
  border-radius:20px;background:#111;border:6px solid #16181c;
  box-shadow:0 18px 34px -14px rgba(0,0,0,.42);
}
.device::after{
  /* Bocina del teléfono: detalle chico que hace que se lea como dispositivo */
  content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:42px;height:4px;border-radius:99px;background:rgba(255,255,255,.22);z-index:2;
}
.device iframe{position:absolute;top:0;left:0;border:0;pointer-events:none;background:#fff;
  width:340%;height:340%;transform:scale(.294);transform-origin:top left}

.tpl-card-preview-link{position:absolute;inset:0;z-index:3;display:block}
.tpl-card-body{padding:18px 18px 20px}
.tpl-card-type{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--mk-gold);font-weight:700;margin-bottom:6px}
.tpl-card h3{font-size:18px;margin-bottom:6px}
.tpl-card p{font-size:13px;color:var(--mk-ink-dim);line-height:1.5;margin:0 0 16px}
.tpl-card a.btn-view{display:inline-block;font-size:13px;font-weight:700;color:var(--mk-brand-soft)}
.tpl-card a.btn-view:hover{text-decoration:underline}
.catalog-more{text-align:center;margin:0;padding:0 24px 8px}
.catalog-more a{
  display:inline-block;border:1px solid var(--mk-gold-fill);color:var(--mk-gold);
  padding:11px 24px;border-radius:99px;font-size:13.5px;font-weight:600;
}
.catalog-more a:hover{background:var(--mk-bg-soft)}
.catalog-empty{text-align:center;padding:60px 24px;color:var(--mk-ink-dim)}

/* Subsección por familia de estilo dentro de una categoría (Florales,
   Clásicos, Con Texturas, Temáticos). Un nivel visualmente más discreto que el
   encabezado de la categoría: etiqueta chica en versalitas con un filete a
   cada lado, para que se lea como una separación y no como otro título.
   Los selectores llevan .catalog-section por delante a propósito — sin eso, la
   regla .catalog-section .catalog-grid de arriba gana por especificidad y
   vuelve a imponer su padding. */
.catalog-family{max-width:1200px;margin:0 auto}
.catalog-family-head{
  display:flex;align-items:center;gap:16px;
  max-width:1200px;margin:34px auto 0;padding:0 24px;
  font-family:'Montserrat',system-ui,sans-serif;font-size:12.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.22em;color:var(--mk-gold);
}
.catalog-family-head::before,
.catalog-family-head::after{content:"";flex:1;height:1px;background:var(--mk-line)}
.catalog-section .catalog-grid-family{padding:22px 24px 42px}
.catalog-section .catalog-family:last-child .catalog-grid-family{padding-bottom:72px}
@media(max-width:520px){
  .catalog-family-head{gap:10px;font-size:11.5px;letter-spacing:.16em}
}

/* -----------------------------------------------------------------------
   Opiniones de clientes (/opiniones + teaser en la página principal)
   ----------------------------------------------------------------------- */
.reviews-teaser{padding-block:70px;border-top:1px solid var(--mk-line)}
.reviews-teaser-wrap{max-width:1000px;margin:0 auto;padding:0 24px}
.reviews-teaser h2{font-size:30px;margin-top:10px;margin-bottom:36px}
.reviews-teaser-grid{display:grid;gap:20px}
@media(min-width:760px){.reviews-teaser-grid{grid-template-columns:repeat(3,1fr)}}

.reviews-grid{padding:44px 24px 0;display:grid;gap:20px;margin-left:auto;margin-right:auto}
@media(min-width:640px){.reviews-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.reviews-grid{grid-template-columns:repeat(3,1fr)}}

.review-card{background:var(--mk-panel);border:1px solid var(--mk-line);border-radius:14px;padding:22px;box-shadow:var(--mk-shadow);display:flex;flex-direction:column;gap:12px}
.review-stars{font-size:15px;letter-spacing:2px;color:var(--mk-line)}
.review-stars .on{color:var(--mk-gold)}
.review-comment{font-size:14px;line-height:1.6;color:var(--mk-ink);margin:0;flex:1}
.review-author{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px}
.review-name{font-weight:700;color:var(--mk-brand-soft)}
.review-type{color:var(--mk-ink-dim);border:1px solid var(--mk-line);padding:2px 10px;border-radius:99px;font-size:11px;text-transform:uppercase;letter-spacing:.06em}

.review-form-section{padding-block:70px;background:var(--mk-bg-soft);border-top:1px solid var(--mk-line);margin-top:56px}
.review-form{margin-top:6px}
.review-form .field{margin-top:16px;display:flex;flex-direction:column;gap:6px}
.review-form label{font-size:12.5px;font-weight:600;color:var(--mk-brand-soft)}
.review-form input,.review-form select,.review-form textarea{
  font-family:'Montserrat',sans-serif;font-size:14px;padding:11px 14px;border-radius:8px;
  border:1px solid var(--mk-line);background:var(--mk-panel);color:var(--mk-ink);
}
.review-form textarea{resize:vertical;min-height:100px}
.review-form button{margin-top:22px;font-family:'Montserrat',sans-serif}
.review-form-note{font-size:12px;color:var(--mk-ink-dim);text-align:center;margin-top:14px}

.review-confirm{background:rgba(184,134,63,.12);border:1px solid var(--mk-gold-fill);color:var(--mk-brand-soft);padding:14px 18px;border-radius:10px;font-size:14px;text-align:center}
.review-error{background:rgba(220,60,60,.1);border:1px solid #d84a4a;color:#a92a2a;padding:14px 18px;border-radius:10px;font-size:14px;text-align:center}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .review-error{color:#ff9d9d}}
:root[data-theme="dark"] .review-error{color:#ff9d9d}