/* ==========================================================================
   Componentes — botones, fotografía, listas editoriales, idioma, barra móvil
   ========================================================================== */

/* Botones ---------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3.1rem;
    padding: 0.85rem 2rem;
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.2;
    cursor: pointer;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), transform var(--transition);
}

.btn--primary {
    background: var(--verde-oscuro);
    color: var(--blanco);
}

.btn--primary:hover {
    background: var(--verde);
    color: var(--blanco);
}

.btn--ghost {
    background: transparent;
    border-color: var(--verde-oscuro);
    color: var(--verde-oscuro);
}

.btn--ghost:hover {
    background: var(--verde-oscuro);
    color: var(--blanco);
}

/* CTA principal de la Home: un trazo que avanza al posarse, en vez de una
   flecha decorativa fija. Discreto en reposo, deliberado al detenerse. */
.btn--arrow::after {
    content: '→';
    display: inline-block;
    transition: transform var(--transition);
}

.btn--arrow:hover::after,
.btn--arrow:focus-visible::after { transform: translateX(0.3rem); }

.btn:active { transform: translateY(1px); }

.btn--sm {
    min-height: 2.5rem;
    padding: 0.55rem 1.2rem;
    font-size: 0.68rem;
}

.band--dark .btn--ghost {
    border-color: var(--linea-inversa);
    color: var(--tinta-inversa);
}

.band--dark .btn--ghost:hover {
    background: var(--tinta-inversa);
    color: var(--verde-oscuro);
}

/* CTA de alto contraste sobre Deep Field Green: crema sólido, nunca el
   verde-sobre-verde del botón por defecto. La flecha hereda el color. */
.band--dark .btn--primary {
    background: var(--tinta-inversa);
    color: var(--verde-oscuro);
}

.band--dark .btn--primary:hover { background: var(--blanco); }

/* El resto del contenido silencioso también necesita su versión clara:
   nota, filetes de los pasos y su numeración. */
.band--dark .note { color: rgba(246, 243, 236, 0.72); }

.band--dark .steps__item {
    border-color: var(--linea-inversa);
}

.band--dark .steps__num { color: rgba(246, 243, 236, 0.6); }

/* Botón de menú -----------------------------------------------------------
   <details> nativo: el panel se abre/cierra sin JavaScript. El JS sólo
   sincroniza aria-expanded (para la animación) y añade Escape/resize. */
.menu-toggle { display: contents; }
.menu-toggle > summary { list-style: none; cursor: pointer; }
.menu-toggle > summary::-webkit-details-marker { display: none; }
.menu-toggle > summary::marker { content: ""; }

.burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: none;
    border: 1px solid var(--linea);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: border-color var(--transition);
}

.burger:hover { border-color: var(--verde); }

.burger__box {
    position: relative;
    display: block;
    width: 1rem;
    height: 0.55rem;
}

.burger__line,
.burger__box::before,
.burger__box::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--verde-oscuro);
    transition: transform var(--transition), opacity var(--transition);
}

.burger__box::before { top: 0; }
.burger__line { top: 50%; }
.burger__box::after { bottom: 0; }

.burger[aria-expanded="true"] .burger__box::before { transform: translateY(0.27rem) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line { opacity: 0; }
.burger[aria-expanded="true"] .burger__box::after { transform: translateY(-0.27rem) rotate(-45deg); }

/* Selector de idioma ----------------------------------------------------- */
.lang { position: relative; }

.lang__toggle {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    gap: 0.4rem;
    padding: 0.45rem 0.1rem;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--tinta-suave);
    cursor: pointer;
    list-style: none;
    transition: color var(--transition);
}

.lang__toggle::-webkit-details-marker { display: none; }
.lang__toggle:hover { color: var(--verde-oscuro); }

.lang__caret { transition: transform var(--transition); }
.lang[open] .lang__caret { transform: rotate(180deg); }

.lang__list {
    position: absolute;
    right: 0;
    top: calc(100% + 0.75rem);
    z-index: 60;
    min-width: 10.5rem;
    padding: 0.5rem 0;
    background: var(--fondo);
    border: 1px solid var(--linea);
    border-radius: var(--radius-btn);
}

.lang__item {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    gap: 0.7rem;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    color: var(--tinta-suave);
    transition: background var(--transition), color var(--transition);
}

.lang__item:hover { background: var(--fondo-alt); color: var(--verde-oscuro); }
.lang__item.is-current { color: var(--verde-oscuro); }

.lang__short {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    color: var(--marron);
    min-width: 1.6rem;
}

/* Fotografía ------------------------------------------------------------- */
.photo {
    position: relative;
    overflow: hidden;
    margin: 0;
    background: var(--fondo-alt);
    border-radius: 0;
}

.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo--4-5   { aspect-ratio: 4 / 5; }
.photo--4-3   { aspect-ratio: 4 / 3; }
.photo--3-4   { aspect-ratio: 3 / 4; }
.photo--16-9  { aspect-ratio: 16 / 9; }
.photo--21-9  { aspect-ratio: 21 / 9; }
.photo--1-1   { aspect-ratio: 1 / 1; }
/* Sin proporción fija: llena la altura real de su contenedor (hero a
   pantalla completa). El contenedor decide el alto, no la imagen. */
.photo--full  { aspect-ratio: auto; height: 100%; }

.photo--empty {
    display: grid;
    place-items: center;
    background: #ECE7DA;
    box-shadow: inset 0 0 0 1px var(--linea-suave);
}

/* Marcador de lino: el monograma oficial, muy discreto */
.photo__mark-img {
    width: clamp(2.4rem, 2rem + 1.5vw, 3.4rem);
    height: auto;
    opacity: 0.3;
}

.photo__mark {
    font-family: var(--font-ui);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--marron) 45%, transparent);
}

@media (min-width: 48em) {
    .photo--21-9 { aspect-ratio: 21 / 9; }
}

@media (max-width: 47.99em) {
    .photo--21-9 { aspect-ratio: 4 / 3; }
}

/* Listas editoriales ----------------------------------------------------- */







.steps { margin-top: 1.75rem; }

.steps__item {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding-block: 0.85rem;
    border-top: 1px solid var(--linea-suave);
}

.steps__item:last-child { border-bottom: 1px solid var(--linea-suave); }

.steps__num {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--marron);
    min-width: 1.75rem;
}

.steps__label { font-size: 0.95rem; }

.steps--wide { max-width: 34rem; margin-inline: auto; }









.process { display: grid; gap: 2rem; margin-bottom: clamp(2.5rem, 2rem + 3vw, 4rem); }

.process__num {
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--marron);
    margin-bottom: 0.5rem;
}

.process__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--verde-oscuro);
}

.process__text {
    margin-top: 0.55rem;
    font-size: 0.92rem;
    color: var(--tinta-suave);
}









/* FAQ -------------------------------------------------------------------- */
/* FAQ: un índice de preguntas. La primera lleva filete superior para que la
   serie se lea como una tabla de contenidos, no como acordeones sueltos. */
.faq li:first-child .faq__item { border-top: 1px solid var(--linea); }
.faq__item { border-bottom: 1px solid var(--linea-suave); }
.faq li:last-child .faq__item { border-bottom: 1px solid var(--linea); }

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: clamp(1.4rem, 1.1rem + 1vw, 2rem);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.95rem);
    font-weight: 400;
    line-height: 1.22;
    letter-spacing: -0.015em;
    color: var(--verde-oscuro);
    cursor: pointer;
    list-style: none;
}

.faq__question::-webkit-details-marker { display: none; }
.faq__question:hover { color: var(--verde); }

.faq__icon {
    flex: none;
    color: var(--marron);
    transition: transform var(--transition);
}

.faq__item[open] .faq__icon { transform: rotate(45deg); }

.faq__answer {
    padding-bottom: 1.75rem;
    max-width: 60ch;
    color: var(--tinta-suave);
    font-size: 1rem;
    line-height: 1.8;
}

/* Mapa ------------------------------------------------------------------- */
.map {
    position: relative;
    margin-top: 1.5rem;
    aspect-ratio: 16 / 9;
    background: var(--crema);
    border: 1px solid var(--linea-suave);
    border-radius: 2px;
    overflow: hidden;
}

.map__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1rem;
    padding: var(--gutter);
    text-align: center;
}

.map iframe { width: 100%; height: 100%; border: 0; }

/* Barra inferior móvil --------------------------------------------------- */
.mobile-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 55;
    display: flex;
    justify-content: space-around;
    padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
    background: var(--fondo);
    border-top: 1px solid var(--linea-suave);
}

.mobile-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    flex: 1;
    padding: 0.35rem 0.25rem;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

.mobile-bar__item svg {
    width: 1.4rem;
    height: 1.4rem;
    fill: currentColor;
}

.mobile-bar__item.is-current,
.mobile-bar__item:hover { color: var(--verde-oscuro); }

.mobile-bar__item--cta { color: var(--verde); }

@media (min-width: 62em) {
    .mobile-bar { display: none; }
}

@media (max-width: 61.99em) {
    body { padding-bottom: 4.5rem; }
}

/* Rejillas responsivas de los componentes -------------------------------- */
@media (min-width: 48em) {
    
    
    .process { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 3vw, 3rem); }
}

@media (min-width: 62em) {
    .process { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Catálogo: distintivos, atributos y estado -------------------------------- */
.badge {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-pill);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.badge--demo {
    background: color-mix(in srgb, var(--marron) 10%, transparent);
    color: var(--marron);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--tinta-suave);
}

.chip::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
}

.chip--available   { color: var(--verde); }
.chip--limited     { color: var(--marron); }
.chip--unavailable { color: var(--tinta-suave); }

.specs { margin-top: 1.5rem; }

.specs__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 0.7rem;
    border-top: 1px solid var(--linea-suave);
}

.specs__row:last-child { border-bottom: 1px solid var(--linea-suave); }

.specs dt {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--marron);
}

.specs dd {
    margin: 0;
    text-align: right;
    font-size: 0.95rem;
    color: var(--tinta);
}

.specs__row--price dd {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--verde-oscuro);
}

.specs--inline { margin-top: 1.35rem; max-width: 26rem; }

/* Migas de pan (FASE 9) ---------------------------------------------------- */
.breadcrumb {
    margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    font-size: 0.82rem;
    color: var(--tinta-suave);
}

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.breadcrumb li + li::before {
    content: "/";
    margin-right: 0.4rem;
    color: var(--linea);
}

.breadcrumb a:hover { color: var(--verde); }
.breadcrumb [aria-current] { color: var(--verde-oscuro); }

/* La pleita ----------------------------------------------------------------
   La banda trenzada de hoja de palma que ciñe cada queso majorero. Es el
   único sitio donde aparece el color palma: no es un acento de interfaz,
   es el color del material. Máxima contención: dos o tres cortes por página.
   -------------------------------------------------------------------------- */
.pleita {
    height: 14px;
    background: url("/assets/img/brand/pleita.svg") repeat-x center / auto 14px;
}

/* Ciñe una banda: el trenzado corre a lo ancho completo del viewport. */
.pleita--band {
    width: 100%;
    opacity: 0.75;
}

/* Sobre fondo verde profundo el trenzado se aclara para no ensuciar. */
.band--dark .pleita { opacity: 0.5; }

/* Corte de salida del hero inmersivo: un detalle material que se descubre
   al desplazar, no una cenefa. Sólo aquí — el resto de cortes de la pleita
   conservan su peso habitual. */
.pleita--quiet {
    height: 7px;
    background-size: auto 7px;
    opacity: 0.32;
}