/* Paleta tierra pedida en la guía de contenidos: beige, arcilla, marrón y verde oliva */
:root {
  --beige: #f4ede1;
  --beige-oscuro: #e8dcc8;
  --arena: #fbf7ef;
  --arcilla: #b5653f;
  --arcilla-oscuro: #94502f;
  --marron: #4a3a2c;
  --marron-suave: #6e5a48;
  --oliva: #5f6638;
  --oliva-oscuro: #3e4425;
  --oliva-claro: #c7c99a;
  --texto: #2d251e;
  --texto-suave: #66584b;
  --radio: 14px;
  --sombra: 0 6px 24px rgba(74, 58, 44, 0.09);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Work Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--texto); background: var(--beige); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; color: var(--marron); }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
[hidden] { display: none !important; }

.contenedor { width: min(1120px, 100% - 32px); margin-inline: auto; }
.angosto { max-width: 760px; }

.boton {
  display: inline-block; padding: .8em 1.4em; border-radius: 999px;
  background: var(--arcilla); color: #fff; font: 600 1rem var(--sans);
  text-decoration: none; border: 2px solid var(--arcilla); cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.boton:hover { background: var(--arcilla-oscuro); border-color: var(--arcilla-oscuro); transform: translateY(-1px); }
.boton-claro { background: transparent; color: var(--marron); border-color: var(--marron); }
.boton-claro:hover { background: var(--marron); border-color: var(--marron); color: var(--beige); }
.boton-chico { padding: .45em 1.1em; }
.boton:disabled { opacity: .6; cursor: wait; }

.antetitulo { font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--arcilla); margin-bottom: .6em; }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 10; background: rgba(244, 237, 225, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--beige-oscuro); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--serif); font-weight: 700; font-size: 1.25rem; color: var(--marron); white-space: nowrap; }
.menu { display: flex; align-items: center; gap: 22px; }
.menu a { text-decoration: none; font-weight: 500; font-size: .96rem; white-space: nowrap; }
.menu a:not(.boton):hover, .menu a[aria-current="page"]:not(.boton) { color: var(--arcilla); }
.menu a[aria-current="page"]:not(.boton) { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.menu-boton { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.menu-boton span { display: block; width: 24px; height: 2px; background: var(--marron); margin: 5px 0; transition: transform .2s, opacity .2s; }

@media (max-width: 1100px) {
  .menu-boton { display: block; }
  .menu {
    position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--beige); border-bottom: 1px solid var(--beige-oscuro);
    padding: 8px 16px 16px; display: none;
    max-height: calc(100vh - 68px); overflow-y: auto;
  }
  .menu.abierto { display: flex; }
  .menu a { padding: 13px 0; border-bottom: 1px solid var(--beige-oscuro); font-size: 1.05rem; }
  .menu a.boton { margin-top: 14px; text-align: center; border-bottom: 2px solid var(--arcilla); }
  .menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* Portada (inicio) y cabezal de páginas internas */
.portada { padding: 56px 0 40px; }
.portada-fila { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.bajada { font-size: 1.14rem; color: var(--texto-suave); max-width: 34em; }
.botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ilustracion { width: 100%; max-width: 420px; margin-inline: auto; }
.portada-foto { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 200px 200px 22px 22px; box-shadow: var(--sombra); }
.sellos { list-style: none; padding: 0; margin: 56px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sellos li { background: var(--arena); border-radius: var(--radio); padding: 18px 20px; box-shadow: var(--sombra); }
.sellos strong { display: block; font-family: var(--serif); color: var(--marron); font-size: 1.1rem; }
.sellos span { color: var(--texto-suave); font-size: .95rem; }

.cabezal { padding: 64px 0 24px; }
.cabezal .bajada { margin-bottom: 0; }

@media (max-width: 760px) {
  .portada { padding-top: 28px; }
  .portada-fila { grid-template-columns: 1fr; gap: 20px; }
  .portada-dibujo { order: -1; }
  .ilustracion { max-width: 200px; }
  .portada-foto { aspect-ratio: 4 / 3; border-radius: 22px; }
  .sellos { grid-template-columns: 1fr; margin-top: 36px; }
  .cabezal { padding: 40px 0 8px; }
}

/* Secciones */
.seccion { padding: 80px 0; }
.seccion-compacta { padding: 40px 0 80px; }
.intro { font-size: 1.1rem; color: var(--texto-suave); max-width: 40em; margin-bottom: 36px; }
.seccion-oliva { background: var(--oliva-oscuro); color: var(--beige); }
.seccion-oliva h2, .seccion-oliva h3, .seccion-oliva h4 { color: var(--beige); }
.seccion-oliva .intro, .seccion-oliva p { color: #ddd8c2; }
.seccion-oliva .antetitulo { color: #e3a57f; }
.seccion-clara { background: var(--beige-oscuro); }
.encabezado-fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 32px; }
.encabezado-fila .intro { margin-bottom: 0; }
.enlace-flecha { font-weight: 600; color: var(--arcilla); text-decoration: none; white-space: nowrap; }
.enlace-flecha::after { content: ' →'; }
.seccion-oliva .enlace-flecha { color: #e3a57f; }
@media (max-width: 760px) { .seccion { padding: 60px 0; } }

/* Tarjetas de hongos */
.hongos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.hongos-destacados { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.hongo { background: var(--arena); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); display: flex; flex-direction: column; }
.hongo-imagen {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--tono) 22%, var(--beige)) 0 55%, var(--beige-oscuro) 56%);
}
.hongo-imagen svg { width: 52%; }
.hongo-imagen img { width: 100%; height: 100%; object-fit: cover; }
.hongo-cuerpo { padding: 20px 22px 24px; }
.hongo-cuerpo h3 { margin-bottom: .1em; }
.hongo-cuerpo p { color: var(--texto-suave); margin: 0; }
.hongo-cuerpo .cientifico { font-style: italic; margin-bottom: .7em; font-size: .95rem; }
.etiqueta { display: inline-block; font-size: .76rem; font-weight: 600; letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }
.etiqueta-principal { background: var(--oliva); color: #fff; }
.etiqueta-evaluacion { background: #f0dccd; color: var(--arcilla-oscuro); }
.etiqueta-futura { background: var(--beige-oscuro); color: var(--marron-suave); }
.etiqueta-info { background: #e6e5cf; color: var(--oliva-oscuro); }

.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filtros button {
  font: 500 .95rem var(--sans); padding: .5em 1.1em; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--marron-suave); background: transparent; color: var(--marron);
}
.filtros button[aria-pressed="true"] { background: var(--marron); color: var(--beige); border-color: var(--marron); }

.nota { font-size: .92rem; color: var(--texto-suave); margin-top: 24px; }

/* Bloques de texto con tarjeta */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.tarjeta { background: var(--arena); border-radius: var(--radio); padding: 26px; box-shadow: var(--sombra); }
.tarjeta p { color: var(--texto-suave); margin: 0; }
.tarjeta-icono { width: 50px; height: 50px; border-radius: 50%; background: var(--beige-oscuro); display: grid; place-items: center; margin-bottom: 14px; }
.tarjeta-icono svg { width: 26px; height: 26px; fill: none; stroke: var(--arcilla); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.aviso-editorial { padding: 22px 26px; border-radius: var(--radio); background: #efe3c8; border-left: 5px solid var(--arcilla); margin-bottom: 36px; }
.aviso-editorial p { margin: 0; }
.consejo { padding: 24px 28px; background: var(--arena); border-radius: var(--radio); border-left: 5px solid var(--oliva); box-shadow: var(--sombra); }
.consejo p:last-child, .consejo ul:last-child { margin-bottom: 0; }

/* Proceso */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pasos li { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radio); padding: 22px; }
.pasos h3 { font-size: 1.12rem; }
.pasos p { margin: 0; font-size: .97rem; }
.paso-num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e3a57f; color: var(--oliva-oscuro); font-weight: 700; margin-bottom: 12px; }
.pasos-claro li { background: var(--arena); border: 0; box-shadow: var(--sombra); }
.pasos-claro p { color: var(--texto-suave); }
.pasos-claro .paso-num { background: var(--arcilla); color: #fff; }
@media (max-width: 960px) { .pasos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pasos { grid-template-columns: 1fr; } }

.clima-fijo, .clima-salas, .clima-sala { display: grid; gap: 16px; }
.clima-fijo { grid-template-columns: repeat(4, 1fr); margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .16); }
.clima-fijo strong, .clima-sala strong { display: block; font-family: var(--serif); font-size: 1.7rem; color: #e3a57f; }
.clima-fijo span, .clima-sala span { color: #ddd8c2; font-size: .92rem; }
@media (max-width: 760px) { .clima-fijo { grid-template-columns: 1fr 1fr; } }
.clima { margin-top: 40px; padding: 24px; border-radius: var(--radio); background: rgba(0, 0, 0, .18); }
.clima-salas { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.clima-sala { grid-template-columns: repeat(3, 1fr); background: rgba(255, 255, 255, .06); padding: 16px; border-radius: 10px; }
.clima-sala h4 { grid-column: 1 / -1; margin: 0; }

/* Dos columnas genéricas */
.dos-col { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.dos-col p { color: var(--texto-suave); }
@media (max-width: 860px) { .dos-col { grid-template-columns: 1fr; gap: 32px; } }
.lista-check { list-style: none; padding: 0; margin: 0; }
.lista-check li { padding: 10px 0 10px 34px; position: relative; border-bottom: 1px solid var(--beige-oscuro); }
.lista-check li::before { content: ''; position: absolute; left: 4px; top: 16px; width: 14px; height: 8px; border-left: 3px solid var(--oliva); border-bottom: 3px solid var(--oliva); transform: rotate(-45deg); }

/* Recetas */
.recetas { display: grid; gap: 14px; }
.receta { background: var(--arena); border-radius: var(--radio); box-shadow: var(--sombra); }
.receta summary { list-style: none; cursor: pointer; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.receta summary::-webkit-details-marker { display: none; }
.receta summary strong { display: block; font-family: var(--serif); font-size: 1.2rem; color: var(--marron); }
.receta-datos { color: var(--texto-suave); font-size: .93rem; }
.receta-flecha { flex: none; width: 12px; height: 12px; border-right: 2.5px solid var(--arcilla); border-bottom: 2.5px solid var(--arcilla); transform: rotate(45deg); transition: transform .2s; }
.receta[open] .receta-flecha { transform: rotate(-135deg); }
.receta-cuerpo { display: grid; grid-template-columns: .8fr 1.2fr; gap: 32px; padding: 0 24px 24px; }
.receta-cuerpo ul, .receta-cuerpo ol { margin: 0; padding-left: 1.2em; color: var(--texto-suave); }
.receta-cuerpo li { margin-bottom: .4em; }
@media (max-width: 700px) { .receta-cuerpo { grid-template-columns: 1fr; gap: 16px; } }

/* Contacto y formulario */
.contacto-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.contacto-item { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--arena); border-radius: var(--radio); text-decoration: none; box-shadow: var(--sombra); }
a.contacto-item:hover { outline: 2px solid var(--arcilla); }
.contacto-item svg { flex: none; width: 34px; height: 34px; fill: none; stroke: var(--arcilla); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contacto-item > span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.contacto-item strong { color: var(--marron); }
.contacto-item small { color: var(--texto-suave); font-size: .88rem; }

.formulario { background: var(--arena); border-radius: var(--radio); padding: 28px; box-shadow: var(--sombra); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formulario label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: .95rem; color: var(--marron); }
.formulario .ancho { grid-column: 1 / -1; }
.formulario input, .formulario select, .formulario textarea {
  font: 400 1rem var(--sans); padding: .7em .85em; border-radius: 10px;
  border: 1.5px solid var(--beige-oscuro); background: #fff; color: var(--texto); width: 100%;
}
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: none; border-color: var(--arcilla); }
.formulario textarea { min-height: 130px; resize: vertical; }
.formulario .trampa { position: absolute; left: -9999px; }
.formulario .boton { justify-self: start; }
.form-aviso { grid-column: 1 / -1; padding: 12px 16px; border-radius: 10px; margin: 0; }
.form-aviso-ok { background: #e6e5cf; color: var(--oliva-oscuro); }
.form-aviso-error { background: #f3d9cc; color: var(--arcilla-oscuro); }
.form-legal { grid-column: 1 / -1; font-size: .85rem; color: var(--texto-suave); margin: 0; }
@media (max-width: 640px) { .formulario { grid-template-columns: 1fr; padding: 20px; } }

/* Créditos de fotos */
.creditos { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.creditos li { display: flex; gap: 16px; align-items: center; background: var(--arena); border-radius: var(--radio); padding: 12px; font-size: .92rem; color: var(--texto-suave); }
.creditos img { flex: none; width: 72px; height: 72px; object-fit: cover; border-radius: 10px; }
.creditos strong { display: block; color: var(--marron); overflow-wrap: anywhere; }
.creditos a { color: var(--arcilla); }

/* Llamado final */
.llamado { text-align: center; padding: 64px 24px; border-radius: 22px; background: var(--arcilla); color: #fff; }
.llamado h2 { color: #fff; }
.llamado p { color: #fbe9de; max-width: 36em; margin-inline: auto; }
.llamado .boton { background: #fff; color: var(--arcilla-oscuro); border-color: #fff; margin-top: 12px; }
.llamado .boton:hover { background: var(--beige); }

/* Pie */
.pie { background: var(--marron); color: #d8cbb8; padding: 48px 0 24px; font-size: .94rem; }
.pie-grilla { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
.pie p { margin: .6em 0 0; }
.marca-pie { color: var(--beige); font-size: 1.15rem; }
.pie-enlaces, .pie-contacto { display: flex; flex-direction: column; gap: 6px; }
.pie a { text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie-legal { margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .85rem; }
@media (max-width: 760px) { .pie-grilla { grid-template-columns: 1fr 1fr; } .pie-grilla > div:first-child { grid-column: 1 / -1; } }

/* WhatsApp flotante */
.whatsapp-flotante { position: fixed; right: 18px; bottom: 18px; z-index: 20; width: 58px; height: 58px; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); }
.whatsapp-flotante svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }