/* grace.mx · estilos compartidos.
   Los estilos de cada elemento van inline en las plantillas (copiados del diseño);
   aquí solo viven las fuentes, los estados (:hover, :focus) y las reglas de teléfono. */

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url(fuentes/cormorant-garamond-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/cormorant-garamond-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(fuentes/cormorant-garamond-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/cormorant-garamond-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url(fuentes/cormorant-garamond-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fuentes/cormorant-garamond-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(fuentes/cormorant-garamond-latin-500-italic.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/instrument-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fuentes/instrument-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/instrument-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400;font-display:swap;src:url(fuentes/instrument-sans-latin-400-italic.woff2) format('woff2')}

html{-webkit-text-size-adjust:100%}
body{margin:0;background:#FFFFFF}
a{color:#2F4A37}a:hover{color:#3E5C45}
.nav a:hover,.ficha:hover .nombre{text-decoration:underline;text-decoration-color:#3E5C45;text-underline-offset:6px;text-decoration-thickness:1px}
.ficha:hover .ilu{transform:translateY(-4px)}
.btn-s:hover{border-bottom-color:#3E5C45;color:#3E5C45}
footer a:hover{color:#FFFFFF;text-decoration:underline;text-underline-offset:4px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #2F4A37;outline-offset:3px}
/* Sobre el pie café y el panel verde el anillo verde no se ve: ahí es claro */
footer a:focus-visible,footer button:focus-visible,.panel a:focus-visible{outline-color:#F4EEE9}
[hidden]{display:none!important}

/* Chip de filtro: el estado vivo se expresa con aria-pressed. El rosa y el lino viven solo dentro de las fichas,
   así que el hover fuera de ellas es un gris cálido neutro. */
.chip{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;border:1px solid #DAD5D1;background:transparent;color:#2E2422;font-family:'Instrument Sans','Helvetica Neue',Helvetica,sans-serif;font-size:14px;font-weight:400;line-height:1;cursor:pointer;white-space:nowrap;text-decoration:none;box-sizing:border-box;position:relative}
.chip:hover{background:#F4F2F0}
.chip[aria-pressed="true"]{border-color:#1C1614;background:#1C1614;color:#FFFFFF;font-weight:500}
.chip[aria-pressed="true"]:hover{background:#1C1614}

/* Fila de 12 meses como filtro (galería de Flores); el mes elegido se pinta del mismo café que los chips */
.meses{display:flex;border:1px solid #E2CDCD;width:fit-content;max-width:100%;box-sizing:border-box}
.meses .mes{width:32px;height:32px;display:grid;place-items:center;font-size:12px;letter-spacing:.04em;line-height:1;color:#2E2422;cursor:pointer;border:0;border-right:1px solid #E2CDCD;background:transparent;font-family:inherit;font-weight:400;padding:0;box-sizing:border-box}
.meses .mes:last-child{border-right:0}
.meses .mes:hover{background:#F4F2F0}
.meses .mes[aria-pressed="true"]{background:#1C1614;color:#FFFFFF;font-weight:500}
.panel a:hover{color:#FFFFFF}
body[data-seccion="casa"] .panel a:hover{color:#7A5F2E}
.panel,.campos,.campos dd{min-width:0}

/* Fotos sobre fondo rosa o lino (bloques de listas): el blanco de la foto se funde con el fondo */
#listas img{mix-blend-mode:multiply}

/* Botón oro del pie */
.btn-oro:hover{background:#B08F3E}

/* Sección Casa: acento ocre y líneas lino */
body[data-seccion="casa"] a{color:#7A5F2E}body[data-seccion="casa"] a:hover{color:#8C6F3A}
body[data-seccion="casa"] .nav a:hover,body[data-seccion="casa"] .ficha:hover .nombre{text-decoration-color:#8C6F3A}
body[data-seccion="casa"] .chip{border-color:#E6DFD3}
body[data-seccion="casa"] .btn-s:hover{border-bottom-color:#8C6F3A;color:#8C6F3A}
body[data-seccion="casa"] a:focus-visible,body[data-seccion="casa"] button:focus-visible{outline-color:#7A5F2E}
body[data-seccion="casa"] footer a:focus-visible{outline-color:#F4EEE9}
body[data-seccion="casa"] .chip[aria-pressed="true"]{border-color:#1C1614;background:#1C1614}

/* Sección Flores: líneas rosa (el chip elegido conserva el borde café) */
body[data-seccion="flores"] .chip{border-color:#E2CDCD}
body[data-seccion="flores"] .chip[aria-pressed="true"]{border-color:#1C1614}

@media (max-width:1215px){.rama-lado{display:none!important}.ramita-movil{display:block!important}}
@media (max-width:640px){
  .cont{padding-left:16px!important;padding-right:16px!important}
  .catalogo{grid-template-columns:repeat(2,1fr)!important;gap:32px 16px!important}
  .secc{padding-top:64px!important;padding-bottom:64px!important}
  .h-hero{font-size:44px!important}
  .h-secc{font-size:56px!important}
  .rama-lado{display:none!important}.rama-pie{display:none!important}.ramita-movil{display:block!important}
  .nav nav{margin-left:0!important;order:3;width:100%;gap:20px!important}
  .nav>a[aria-label="Buscar"]{margin-left:auto}
  .ilu-cat{height:160px!important}
  .nombre{font-size:24px!important}
  /* Área táctil de 44 px alrededor de cada chip, sin cambiar su dibujo */
  .chip::before{content:'';position:absolute;inset:-4px}
  /* Filtro de meses: más alto para el dedo; en la ficha, la fila encoge para caber en el panel */
  .meses .mes{width:28px!important;height:44px!important}
  .panel .meses{width:100%!important}
  .panel .meses li{width:auto!important;flex:1 1 0;min-width:0}
  .col-listas{grid-column:1/-1!important}
  .secc-flor{padding:24px 16px 64px!important}
  .ilu-flor{max-width:70%!important}
  .marca{position:static!important;font-size:40px!important;font-weight:400!important}
  .panel{padding:24px 16px!important}
  .campos{grid-template-columns:1fr!important}
  .campos dd{border-top:0!important;padding-top:0!important}
}
@media (prefers-reduced-motion:reduce){.ficha:hover .ilu{transform:none}.ilu{transition:none!important}}