/* =========================================================
   Estilos campaña “dating” · CRE Menorca
   Paleta: azul #004aad · rosa #ffa4ee · amarillo #ffd200
   Serif titular (CANELA-like): usarás tu @font-face si la tienes.
   ========================================================= */

/* Tipos base */
:root{
  --primary:#004aad;   /* azul Canva (Correcto) */
  --pink:#ffa4ee;      /* rosa claro Canva */
  --magenta:#db078c;   /* magenta textos Canva (NUEVO) */
  --yellow:#ffdb15;    /* amarillo exacto Canva (CORREGIDO) */
  --coral:#ff3131;     /* rojo Red Flags Canva (CORREGIDO) */
  --green:#019d23;     /* verde contenedor Canva (NUEVO) */
  --purple:#6d2aa8;    /* morado Canva (NUEVO) */
  --bg:#f3f5f9;        /* fondo gris claro Canva (CORREGIDO) */
  --ink:#0b1f44;       /* texto principal sobre claros */
  --muted:#5a6a85;     /* texto secundario */
  --card:#ffffff;
  --border:#e5e7eb;
  --shadow: 0 8px 28px rgba(0,0,0,.08);

  --serif: "Canela","Playfair Display","DM Serif Display","Cormorant Garamond",Georgia,serif;
  --sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

/* Reset mínimo */
*{
  box-sizing:border-box;
  -webkit-tap-highlight-color: transparent; /* Quita el destello azul al tocar botones/links */
  user-select: none;              /* Evita seleccionar texto */
  -webkit-user-select: none;      /* Safari/Chrome */
  -moz-user-select: none;         /* Firefox */
}

/* IMPRESCINDIBLE: Permitir escribir en el buscador del diccionario */
input {
  user-select: text !important;
  -webkit-user-select: text !important;
}

html{scroll-behavior:smooth} /* Scroll suave nativo */
html,body{margin:0;padding:0}
img{
  max-width:100%;
  height:auto;
  display:block;
  -webkit-user-drag: none; /* Evita que salga la 'foto fantasma' al arrastrar */
  pointer-events: none;    /* Evita menú contextual en fotos (guardar imagen, etc) */
}

/* Permitir clic en logos/imágenes que sean enlaces (ej: header) */
a img {
  pointer-events: auto;
}

/* Base */
body{
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{font-family: var(--serif); margin:0 0 .55rem}
h1{font-weight:900; font-size:clamp(2rem, 1.3rem + 3vw, 3.25rem); line-height:1.08; letter-spacing:.1px}
h2{font-weight:800; font-size:clamp(1.35rem, 1rem + 1.6vw, 2rem)}
h3{font-weight:800; font-size:clamp(1.15rem, .9rem + 1vw, 1.45rem)}

p{margin:.25rem 0 .9rem}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1100px, 92%); margin-inline:auto}

/* Accesibilidad */
.visually-hidden{
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}

/* ---------------- Header ---------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(148,163,184,0.35);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.8rem 0;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-weight:900;
  letter-spacing:.04em;
  color:var(--ink);
  text-transform:uppercase;
  font-size:.86rem;
}
.brand i{
  font-size:1.35rem;
  color:var(--primary);
}
.brand-title{
  font-family:"Poppins", var(--sans);
  text-transform:none;
  letter-spacing:0;
  font-weight:600;
}
.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.2rem;
  border-radius:999px;
  background:rgba(241,245,249,.9);
  border:1px solid rgba(148,163,184,.6);
}
.lang-btn{
  border:none;
  background:transparent;
  border-radius:999px;
  padding:.28rem .7rem;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  color:#64748b;
  transition:background .15s ease, color .15s ease, transform .1s;
}
.lang-btn.active{
  background:#0f172a;
  color:#f9fafb;
  transform:translateY(-1px);
}
.lang-btn:focus-visible{
  outline:2px solid #1d4ed8;
  outline-offset:2px;
}

/* ---------------- HERO ---------------- */
.hero{
  /* fondo inspirado en el rosa del PDF, muy suave */
  background: radial-gradient(90% 120% at 10% 0%, #ffe7fb 0, #fff 60%), var(--bg);
  padding:3rem 0 2rem;
}
.hero .accent{color:var(--primary)}
.feeling{
  color:var(--coral);
  position:relative;
  text-shadow: 0 3px 0 rgba(0,0,0,.04);
}
/* subrayado suave “marcador” bajo FEELING */
.feeling::after{
  content:'';
  position:absolute; left:-.15em; right:-.15em; bottom:.1em; height:.33em;
  background: linear-gradient(90deg, rgba(255,164,238,.55), rgba(255,164,238,.15));
  border-radius:6px; z-index:-1;
}
.lead{font-size:1.05rem; color:var(--muted)}

/* Banderolas del hero (como en el póster “lata”) */
.ribbons{
  display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem;
  justify-content:center;            /* <-- centrado horizontal */
  align-items:center;                /* <-- centrado vertical del conjunto */
}
.ribbon{
  display:inline-block; padding:.55rem .8rem; border-radius:.5rem;
  color:#fff; font-weight:900; font-family:var(--serif);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  transform:rotate(-3deg);
  text-align:center;                 /* <-- texto centrado dentro de cada cinta */
}
.ribbon-yellow{background:var(--primary); color:var(--yellow)}
.ribbon-tilt{
  background:var(--coral); color:#fff; font-style:italic;
  transform:rotate(2.6deg);
}


.ribbon-logo {
  text-align: center;
  margin: 2rem 0;
}

.ribbon-logo img {
  width: 50%;
  max-width: 500px;
  height: auto;
  display: inline-block;
}


/* ---------------- Posters (tarjetas de campaña) ---------------- */
.posters{padding:1.2rem 0 2rem}
.poster-grid{
  display:grid; gap:1rem; grid-template-columns:repeat(3, minmax(0,1fr));
}
.poster-card{
  border-radius:22px; box-shadow:var(--shadow); padding:1.1rem 1.2rem; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-start; min-height:220px;
}
.card-yellow{background:var(--yellow); color:#0d2b5a}
.card-pink{background:var(--pink); color:var(--coral)}

.poster-banner{
  display:inline-block; background:var(--primary); color:var(--yellow);
  font-family:var(--serif); font-weight:900; font-size:clamp(1.2rem, .9rem + 1.5vw, 1.8rem);
  padding:.4rem .6rem; border-radius:.4rem; transform:rotate(-6deg);
  width:max-content; box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.poster-sub{font-size:1.05rem; margin-top:.9rem; font-style:italic}

.poster-title{
  color:var(--coral);
  font-size:clamp(1.6rem, 1.1rem + 2vw, 2.25rem);
}
.poster-ribbon{
  margin-top:.7rem; display:inline-block; background:var(--coral); color:#fff;
  padding:.5rem .7rem; border-radius:.45rem; transform:rotate(-4deg);
  font-style:italic; box-shadow:0 10px 24px rgba(0,0,0,.12);
}

/* ===== Tarjeta “3 Red flags” — versión definitiva (fondo ROJO/CORAL, subrayado visible) ===== */
.rf-teaser{
  position:relative; overflow:hidden;
  background:var(--coral);                   /* FONDO ROJO */
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:1.4rem 1.2rem 1.2rem;
  color:#fff;
}
.rf-teaser::before{
  content:"";
  position:absolute; inset:-20% -10% -30% -10%;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(255,255,255,.22) 0%, transparent 60%),
    radial-gradient(100% 100% at 100% 0%, rgba(255,255,255,.14) 0%, transparent 60%);
  z-index:0; pointer-events:none;
}
.rf-teaser::after{
  content:"";
  position:absolute; inset:0;
  background:url("flag.png") center / cover no-repeat;
  opacity:.18; filter:saturate(140%);
  z-index:0; pointer-events:none;
}

/* “3” centrado translúcido */
.rf-teaser .poster-number{
  position:absolute; top:.6rem; left:50%; transform:translateX(-50%);
  font-family:var(--serif); font-weight:900; line-height:1;
  color:#fff; font-size:clamp(6rem, 10vw + 3rem, 11rem);
  opacity:.23; z-index:1; pointer-events:none;
}

/* Contenido visible */
.rf-teaser .poster-flagline,
.rf-teaser .rf-chips,
.rf-teaser .poster-cta{ position:relative; z-index:2 }

/* Título principal */
.rf-teaser .poster-flagline{
  margin-top:3.6rem;
  font-size:1.2rem;
  font-weight:700;
  color:#fff;
}

/* “Red flags” rojo con subrayado blanco real */
.rf-teaser .poster-flagline strong{
  position:relative;
  color:var(--coral);                        /* texto rojo */
  background:#fff;                           /* banda blanca detrás */
  padding:0 .25em;                           /* margen blanco lateral */
  border-radius:3px;                         /* borde suave */
  box-shadow:0 0 0 3px #fff;                 /* halo blanco visible */
}

/* Chips */
.rf-chips{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem;
  margin-top:.9rem; max-width:680px;
}
.rf-chips .chip{
  background:#ffd8e2;
  color:#7a0f1a;
  border:1px solid rgba(0,0,0,.05);
  padding:.55rem .8rem; border-radius:.9rem;
  font-weight:800; font-family:var(--serif);
  box-shadow:0 10px 22px rgba(0,0,0,.15);
  transform:rotate(-4deg);
}
.rf-chips .chip:nth-child(2){ transform:rotate(2.5deg) }
.rf-chips .chip:nth-child(3){ transform:rotate(-2deg) }

/* CTA en amarillo brillante */
.rf-teaser .poster-cta{
  margin-top:1rem; display:inline-flex; align-items:center; gap:.45rem;
  font-weight:800; color:var(--yellow); text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.85);
}

/* Móvil: limpio y centrado */
@media (max-width:560px){
  .rf-teaser .poster-number{opacity:.2}
  .rf-teaser .poster-flagline{margin-top:3rem}
}

/* ---------------- Pasos ---------------- */
.steps{padding:1.5rem 0 2rem}
.grid-steps{display:grid; gap:1rem; grid-template-columns:repeat(2, minmax(0,1fr))}
.step-card{
  background:var(--card); border-radius:18px; padding:1rem 1.1rem; box-shadow:var(--shadow);
}
.step-icon{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:#eaf1ff; color:var(--primary); margin-bottom:.6rem;
}
.step-icon i{font-size:1.2rem}

/* ---------------- Red flags (lista) ---------------- */
.redflags{padding:.6rem 0 2rem}
.section-title{display:flex; align-items:center; gap:.6rem; margin:0 0 1rem}
.section-title i{opacity:.9; color:var(--coral)}
.rf-grid{display:grid; gap:.9rem; grid-template-columns:repeat(3, minmax(0,1fr))}
.rf-card{
  background:#fff; border-radius:18px; padding:1rem; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:.8rem;
}
.rf-num{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-weight:800;
  background:linear-gradient(135deg, #ff8aa0, var(--coral)); color:#fff;
}
.aside{font-size:.96rem; color:#475569}

/* ---------------- Contenedores/Bins ---------------- */
.bins{padding:2rem 0 4rem}

.bins-grid{
  display:grid; 
  gap:1.5rem; 
  grid-template-columns:repeat(3, minmax(0,1fr));
}

.bin-card{
  /* Quitamos fondo blanco, ahora el color lo define cada modificador */
  border-radius: 32px; 
  box-shadow: var(--shadow); 
  padding: 2rem 1.6rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 2px solid transparent; 
  color: #fff; /* Texto base blanco por defecto */
}

.bin-card header{
  display:flex; 
  align-items:center; 
  justify-content: center;
  margin-bottom: 1.2rem;
  text-align: center;
}

/* Títulos grandes con la tipografía de marca */
.bin-card header h3{
  font-family: var(--serif);
  font-weight: 900;
  font-size: 1.8rem;
  margin: 0;
  text-transform: uppercase;
  line-height: 1.1;
}

/* Eliminamos el puntito, ahora la tarjeta entera es el color */
.bin-card .dot{ display: none; }

/* === COLORES ESPECÍFICOS SEGÚN CANVA === */

/* 1. Contenedor AMARILLO */
.bin-yellow {
  background-color: var(--yellow);
  color: var(--primary); /* Texto azul sobre amarillo */
}
.bin-yellow header h3 { 
  color: var(--magenta); /* Título Magenta sobre Amarillo (Diseño Canva) */
}
.bin-yellow .slogan { 
  color: var(--primary); 
  font-weight: 700; 
  font-style: italic; 
  font-size: 1.1rem;
}
.bin-yellow ul.tri li::marker { color: var(--magenta); }
.bin-yellow details { background: rgba(255,255,255,0.3); color: var(--ink); }
.bin-yellow details summary { color: var(--primary); }


/* 2. Contenedor VERDE */
.bin-green {
  background-color: var(--green); /* Verde Canva #019d23 */
  color: #fff;
}
.bin-green header h3 { 
  color: var(--yellow); /* Título Amarillo sobre Verde */
}
.bin-green .slogan { font-weight: 600; opacity: 0.95; font-size: 1.05rem; }
.bin-green ul.tri li::marker { color: var(--yellow); }
.bin-green details { background: rgba(0,0,0,0.15); }
.bin-green details summary { color: var(--yellow); }
.bin-green .rf-note { 
  color: #fff; 
  background: rgba(255,50,50,0.2); 
  border: 1px solid rgba(255,255,255,0.3);
}


/* 3. Contenedor AZUL */
.bin-blue {
  background-color: var(--primary); /* Azul Canva */
  color: #fff;
}
.bin-blue header h3 { 
  color: var(--yellow); /* Título Amarillo sobre Azul */
}
.bin-blue ul.tri li::marker { color: var(--yellow); }
.bin-blue details { background: rgba(255,255,255,0.1); }
.bin-blue details summary { color: var(--yellow); }


/* === Ajustes generales dentro de las tarjetas === */
.slogan{ margin: 0 0 1.5rem; line-height: 1.4; }

ul.tri{
  margin: 0 0 1.5rem; 
  padding-left: 1.2rem;
  font-weight: 500;
  font-size: 0.95rem;
}
ul.tri li{ margin-bottom: 0.6rem; }

details{
  margin-top: auto; /* Empuja el acordeón al final */
  padding: 0.8rem;
  border-radius: 12px;
  font-size: 0.9rem;
}
details summary{
  cursor:pointer; 
  font-weight:800; 
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex; align-items: center; gap: 0.5rem;
}
.tips{ padding-left: 1rem; margin-top: 0.8rem; opacity: 0.95; }
.rf-note{ 
  margin-top: 0.8rem; 
  font-size: 0.85rem; 
  padding: 0.6rem; 
  border-radius: 8px; 
  display: flex; gap: 0.5rem; 
  line-height: 1.3;
}

/* ---------------- Diccionario ---------------- */
.dictionary{padding:1rem 0 2rem}
.dict-header{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.6rem}
.search{
  display:flex; align-items:center; gap:.5rem; background:#fff;
  border:1px solid #e6ecf5; border-radius:12px; padding:.45rem .65rem; box-shadow:var(--shadow)
}
.search i{color:var(--primary); opacity:.85}
.search input{border:0; outline:0; background:transparent; min-width:200px; font: 400 1rem/1 var(--sans)}

.dict-list{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.9rem}
.dict-letter{
  grid-column:1/-1; font:700 .85rem/1 var(--sans);
  color:#334155; text-transform:uppercase; letter-spacing:.06em;
  margin-top:.6rem; padding-top:.2rem; border-top:1px dashed #e3e9f1;
}
.dict-item{background:#fff; padding:.9rem 1rem; border-radius:16px; box-shadow:var(--shadow)}
.dict-item h4{margin:.05rem 0 .35rem; font-size:1.05rem; font-family:var(--serif); color:var(--ink)}
.dict-item p{margin:0; color:var(--muted); font-size:.96rem}

/* ---------------- Deixalleries ---------------- */
.facilities{padding:1rem 0 2.2rem}
.fac-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.45rem .9rem; padding-left:1rem}

/* ---------------- Footer ---------------- */
.site-footer{
  border-top:1px solid var(--border);
  background:#ffffff;
  padding:1.2rem 0 1.5rem;
  font-size:.82rem;
  color:#6b7280;
}

.footer-grid{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  gap:1rem;
  flex-wrap:wrap;
}

.foot-brand{
  display:flex;
  align-items:center;
  gap:.75rem;
}

.foot-brand i{
  color:var(--primary);
  font-size:1.4rem;
}

.org{
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.addr{
  color:#64748b;
}

.foot-contact{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.9rem 1.4rem;
  justify-content:center;
}

.foot-contact li{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}

.foot-contact i{
  color:var(--primary);
}

/* Logos extra del footer */
.footer-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;      /* Espacio entre logos */
  margin-top: 1.5rem; /* Separación con el contacto */
  width: 100%;
}

.footer-logos img {
  height: 18px;     /* AÚN MÁS PEQUEÑOS (General) */
  width: auto;
  object-fit: contain;
  opacity: 0.8;
  transition: opacity 0.2s;
}

/* Corrección visual para el tercer logo (el "grande") */
.footer-logos img:nth-child(3) {
  height: 15px;     /* Un pelín más pequeño para equilibrar */
}

.footer-logos img:hover {
  opacity: 1;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1024px){
  .poster-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 920px){
  .bins-grid{grid-template-columns:1fr}
  .grid-steps{grid-template-columns:1fr}
  .dict-list{grid-template-columns:1fr}
  .fac-grid{grid-template-columns:1fr}
  .footer-grid{flex-direction:column; align-items:center}
  .rf-grid{grid-template-columns:1fr; gap:.8rem}
}
@media (max-width: 560px){
  .poster-grid{grid-template-columns:1fr}
  .ribbons{gap:.4rem}
  .poster-banner{transform:rotate(-4deg)}
  .poster-ribbon{transform:rotate(-3deg)}
}

@media (max-width: 640px){
  /* HEADER EN COLUMNA PARA QUE QUEPA TODO SIN ROMPERSE */
  .header-inner{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem; /* Espacio entre logo y selector de idioma */
    padding-top: 1rem;
    padding-bottom: 0.8rem;
  }
  
  /* Reducimos un pelín la fuente del título para que no ocupe tanto */
  .brand-title {
    font-size: 0.9rem; 
    text-align: center;
  }

  /* FIX: Diccionario (Buscador debajo y ancho completo) */
  .dict-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .search {
    width: 100%;
  }
  .search input {
    width: 100%;
  }

  /* FIX: Back to Top (Pegado al borde seguro y más pequeño) */
  .back-to-top {
    right: 1rem;
    bottom: 1rem;
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1rem;
  }
}

.brand-logo {
  width:40px;
  height:auto;
  display:block;
}

/* ---------------- Back to Top ---------------- */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 3.2rem;
  height: 3.2rem;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  text-decoration: none;
  z-index: 900;
  
  /* Estado inicial: oculto */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.9);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.back-to-top:hover {
  background: var(--ink); /* Oscurece al pasar el ratón */
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  color: #fff;
}

/* ---------------- (Opcional) Slot para tu CANELA real ---------------- */
/* Si tienes los ficheros de la tipografía, descomenta y apunta las rutas:
@font-face{
  font-family:"Canela";
  src:url("../fonts/Canela-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Canela";
  src:url("../fonts/Canela-Bold.woff2") format("woff2");
  font-weight:700 900; font-style:normal; font-display:swap;
}
*/
/* ---------------- NUEVA SECCIÓN: CTA FEELING (Estilo Rosa) ---------------- */
.feeling-cta-container {
  margin: 3rem auto 2rem;
  width: 100%;
  max-width: 600px;
  padding: 0 1rem;
}

.feeling-cta-card {
  background-color: var(--pink);
  color: var(--coral);
  border-radius: 32px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  transform: rotate(-1.5deg);
  transition: transform 0.3s ease;
}

.feeling-cta-card:hover {
  transform: rotate(0deg) scale(1.02);
}

.feeling-cta-title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  line-height: 1.15;
  margin: 0;
  color: var(--coral);
}

.feeling-cta-btn {
  display: inline-block;
  background-color: var(--coral);
  color: #fff;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.2rem;
  padding: 0.9rem 2.5rem;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 6px 15px rgba(255, 49, 49, 0.4);
  transition: all 0.2s ease;
}

.feeling-cta-btn:hover {
  transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(255, 49, 49, 0.6);
  text-decoration: none;
  color: #fff;
}
}

/* =========================================================
   NUEVA SECCIÓN: Hero Gráfico (Cupido + Textos)
   ========================================================= */
/* Ocultamos el H1 antiguo para que quede idéntico a la foto */
#hero-title {
  display: none !important;
}

.hero-graphic {
  display: flex;
  flex-direction: column;
  align-items: center; /* ESTO CENTRA TODO (Texto y Cupido) */
  gap: 1.2rem;
  margin: 5rem 0 2rem; /* AUMENTADO para separar del título H1 */
  text-align: center;
}

.hero-graphic-title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(1.6rem, 1.3rem + 2vw, 2.8rem); /* Un poco más grande */
  color: var(--primary);
  line-height: 1.15;
  max-width: 900px;
  margin: 0 auto; /* Centrado extra por si acaso */
  text-align: center;
}

.hero-graphic-img {
  width: 140px; /* Ajusta según el tamaño deseado */
  height: auto;
  display: block;
  margin: 0 auto; /* FORZAR CENTRADO */
  transform: rotate(5deg); /* Ligera inclinación simpática */
}

.hero-graphic-box {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1rem + 1.8vw, 2.4rem);
  font-weight: 800;
  font-style: italic;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.5rem;
  transform: rotate(-1.5deg);
}

.hero-graphic-box span {
  background: var(--primary);
  padding: 0.15em 0.5em 0.2em;
  line-height: 1.2;
  box-shadow: var(--shadow);
}

.hero-graphic-box span:nth-child(2) {
  transform: rotate(2deg); /* Efecto "recorte" dinámico */
}