/* =========================================================================
   Guía Clara (helpsmx) — CSS global
   Sistema de diseño oficial extraído de "Guía Clara - Home.dc.html".
   Fuente de verdad: docs/SISTEMA-DISENO.md
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Noto+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Paleta oficial (docs/SISTEMA-DISENO.md) */
  --guinda: #611232;        /* marca, barra superior, banda de confianza */
  --vino: #9B2247;          /* acento primario: enlaces, botones, badges */
  --dorado: #A57F2C;        /* eyebrows, subrayados, divisores */
  --dorado-claro: #E6D194;  /* sobre fondo guinda */
  --beige: #EAD9B8;         /* texto secundario sobre guinda */
  --crema: #FAF7F2;         /* fondo de secciones alternas, inputs */
  --texto: #161A1D;         /* cuerpo y titulares */
  --texto-tenue: #98989A;   /* descripciones, metadatos */
  --borde: #eee7db;         /* cards, inputs, divisores */
  --blanco: #FFFFFF;

  /* Tipografía */
  --font-display: 'Fraunces', Georgia, serif;
  --font-cuerpo: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Sombra con tinte guinda */
  --sombra-card: 0 26px 52px -24px rgba(97, 18, 50, .42);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-cuerpo);
  color: var(--texto);
  background: var(--blanco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--texto);
  text-wrap: balance;
}

a { color: var(--vino); text-decoration: none; }
a:hover { color: var(--guinda); }

::selection { background: var(--dorado-claro); color: var(--guinda); }

/* Aviso Informativo del footer (protección legal, ver prompts/redaccion.md) */
.aviso-informativo {
  text-align: center;
  color: var(--texto-tenue);
  font-size: 0.82rem;
  max-width: 760px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* Botón CTA base (el sistema completo de componentes gc-* llega con las layouts) */
.btn-cta {
  display: inline-block;
  background: var(--vino);
  color: var(--blanco);
  padding: 14px 24px;
  border-radius: 11px;
  font-weight: 600;
  transition: background .25s ease, transform .15s ease;
}
.btn-cta:hover { background: var(--guinda); color: var(--blanco); }
.btn-cta:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =========================================================================
   Componentes de la home (gc-*) — del diseño "Guía Clara - Home.dc.html"
   ========================================================================= */
@keyframes gcFade{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:translateY(0);}}
.gc-mega,.gc-drop{animation:gcFade .18s ease;}
.gc-header{transition:box-shadow .3s ease;}
.gc-header.is-scrolled{box-shadow:0 10px 34px -20px rgba(97,18,50,.35);}
.gc-ul{background-image:linear-gradient(#A57F2C,#A57F2C);background-repeat:no-repeat;background-position:0 100%;background-size:0% 2px;transition:background-size .4s cubic-bezier(.2,.7,.2,1);}
.gc-card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;}
.gc-card:hover{transform:translateY(-6px);box-shadow:0 26px 52px -24px rgba(97,18,50,.42);}
.gc-imgwrap{overflow:hidden;}
.gc-img{transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.gc-card:hover .gc-img{transform:scale(1.055);}
.gc-card:hover .gc-ul{background-size:100% 2px;}
.gc-arrow{transition:transform .3s ease;display:inline-block;}
.gc-card:hover .gc-arrow,.gc-link:hover .gc-arrow,.gc-catcard:hover .gc-arrow{transform:translateX(5px);}
.gc-catcard{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s ease;}
.gc-catcard:hover{transform:translateY(-4px);box-shadow:0 20px 44px -26px rgba(97,18,50,.4);border-color:#A57F2C !important;}
.gc-catcard:hover .gc-caticon{background:#9B2247 !important;}
.gc-catcard:hover .gc-caticon svg{stroke:#fff !important;}
.gc-btn{transition:background .25s ease,color .25s ease,border-color .25s ease,transform .15s ease;cursor:pointer;}
.gc-btn:active{transform:translateY(1px);}
.gc-btn-primary:hover{background:#611232 !important;}
.gc-btn-outline:hover{background:rgba(155,34,71,.07);}
.gc-btn-ghost:hover{background:rgba(255,255,255,.14);}
.gc-navlink{transition:color .2s ease;}
.gc-navlink:hover{color:#9B2247;}
.gc-chip{transition:border-color .25s ease,background .25s ease,color .2s ease;}
.gc-chip:hover{border-color:#A57F2C;background:#FAF7F2;color:#611232;}
.gc-link:hover .gc-ul{background-size:100% 2px;}
.gc-guiarow{transition:background .2s ease;}
.gc-guiarow:hover{background:rgba(255,255,255,.55);}
.gc-ulink{transition:color .2s;}
.gc-ulink:hover{color:#fff !important;}
.gc-flink{transition:color .2s,padding-left .2s;}
.gc-flink:hover{color:#fff !important;padding-left:4px;}
.gc-megawrap:hover .gc-mega{display:block !important;}
.gc-megawrap:hover .gc-chev{transform:rotate(180deg);}
.gc-chev{transition:transform .25s ease;}
.gc-megalink{transition:color .2s ease;}
.gc-megalink:hover{color:#9B2247;}
.gc-hamburger{display:none;}

/* Marcador de foto (mientras no hay fotografía real) */
.gc-photo{position:absolute;inset:0;background:linear-gradient(135deg,#efe6d6,#e7cdd3);display:flex;align-items:center;justify-content:center;}
.gc-photo span{font:600 11px 'Noto Sans';color:rgba(97,18,50,.5);letter-spacing:.14em;text-transform:uppercase;}

a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #9B2247;outline-offset:2px;}

/* Menú móvil (toggle por JS con .is-open) */
.gc-mobile-menu{display:none;}
.gc-mobile-menu.is-open{display:block;}

@media (max-width:960px){
  .gc-nav-desktop{display:none !important;}
  .gc-header-search{display:none !important;}
  .gc-hamburger{display:inline-flex !important;}
  .gc-hero-grid{grid-template-columns:1fr !important;}
  .gc-hero-media{display:none !important;}
  .gc-utility-links{display:none !important;}
}
@media (max-width:600px){
  .gc-bento{grid-template-columns:1fr !important;grid-auto-rows:auto !important;}
  .gc-bento > *{grid-column:auto !important;grid-row:auto !important;min-height:230px;}
  .gc-guias-grid{grid-template-columns:1fr !important;}
  .gc-foot-grid{grid-template-columns:1fr 1fr !important;}
  .gc-band-grid{grid-template-columns:1fr !important;}
}