/* Colores tomados del logo: cacao, sol dorado y hoja verde */
:root {
  --cacao: #5a2a17;
  --cacao-2: #7a3b22;
  --cacao-osc: #3a1a0e;
  --oro: #e8a317;
  --sol: #f6c445;
  --hoja: #3f7d3a;
  --hoja-clara: #e6f0df;
  --crema: #fbf6ec;
  --arena: #f3e7d3;
  --tinta: #2b1a12;
  --gris: #6b5b52;
  --blanco: #ffffff;
  --radio: 18px;
  --sombra: 0 10px 30px rgba(58, 26, 14, .12);
  --titulo: 'Fraunces', Georgia, serif;
  --texto: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: var(--texto); color: var(--tinta); background: var(--crema); line-height: 1.65; font-size: 17px; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.contenedor { width: min(1180px, 100% - 32px); margin-inline: auto; }

h1, h2, h3 { font-family: var(--titulo); line-height: 1.15; font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); color: var(--cacao); margin-bottom: 18px; }
h3 { font-size: 1.25rem; color: var(--cacao); margin-bottom: 8px; }
p + p { margin-top: 14px; }

.etiqueta { display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--hoja); margin-bottom: 10px; }
.etiqueta-clara { color: var(--sol); }

/* ── Botones ── */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 999px; font-weight: 800; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-oro { background: var(--oro); color: var(--cacao-osc); box-shadow: 0 8px 22px rgba(232, 163, 23, .35); }
.btn-oro:hover { background: var(--sol); }
.btn-claro { background: rgba(255, 255, 255, .14); color: var(--blanco); border: 1.5px solid rgba(255, 255, 255, .55); backdrop-filter: blur(4px); }
.btn-claro:hover { background: rgba(255, 255, 255, .25); }

/* ── Barra ── */
.barra { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, box-shadow .3s; }
.barra.solida { background: rgba(251, 246, 236, .96); box-shadow: 0 2px 18px rgba(58, 26, 14, .1); backdrop-filter: blur(8px); }
.barra-in { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--blanco); }
.marca img { width: 48px; height: 48px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)); }
.marca span { display: flex; flex-direction: column; line-height: 1.15; }
.marca strong { font-family: var(--titulo); font-size: 1.15rem; }
.marca small { font-size: .7rem; opacity: .85; }
.barra.solida .marca { color: var(--cacao); }
.menu { display: flex; align-items: center; gap: 26px; }
.menu a { text-decoration: none; font-weight: 700; color: var(--blanco); font-size: .95rem; position: relative; }
.menu a:not(.menu-cta)::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background: var(--oro); transition: width .25s; }
.menu a:hover::after { width: 100%; }
.barra.solida .menu a { color: var(--cacao); }
.menu .menu-cta { background: var(--oro); color: var(--cacao-osc) !important; padding: 9px 20px; border-radius: 999px; }
.menu-btn { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; align-items: center; }
.menu-btn span { width: 24px; height: 2.5px; background: var(--blanco); border-radius: 2px; transition: .3s; }
.barra.solida .menu-btn span { background: var(--cacao); }

/* ── Portada ── */
.portada { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; color: var(--blanco); overflow: hidden; }
.portada-fondo { position: absolute; inset: 0; background-size: cover; background-position: 70% center; transform: scale(1.05); animation: acercar 18s ease-out forwards; }
.portada-fondo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(42, 18, 8, .93) 0%, rgba(58, 26, 14, .78) 45%, rgba(58, 26, 14, .25) 100%); }
@keyframes acercar { to { transform: scale(1); } }
.portada-in { position: relative; padding: 130px 0 150px; max-width: 760px; margin-left: max(16px, calc((100% - 1180px) / 2)); }
.sello { display: inline-flex; align-items: center; gap: 10px; background: rgba(246, 196, 69, .16); border: 1px solid rgba(246, 196, 69, .5); color: var(--sol); padding: 8px 16px; border-radius: 999px; font-size: .85rem; font-weight: 700; margin-bottom: 22px; }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--sol); box-shadow: 0 0 0 4px rgba(246, 196, 69, .25); }
.portada h1 { font-size: clamp(2.3rem, 5.6vw, 4.1rem); margin-bottom: 20px; }
.portada h1 em { font-style: normal; color: var(--sol); }
.portada-texto { font-size: 1.12rem; max-width: 600px; opacity: .92; }
.botones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.ola { position: absolute; bottom: -1px; left: 0; width: 100%; height: 90px; fill: var(--crema); }

/* ── Cifras ── */
.cifras { position: relative; z-index: 2; margin-top: -60px; }
.cifras-grid { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.cifra { padding: 28px 18px; text-align: center; border-right: 1px solid var(--arena); }
.cifra:last-child { border-right: 0; }
.cifra strong { display: block; font-family: var(--titulo); font-size: clamp(2rem, 4vw, 2.8rem); color: var(--cacao); line-height: 1; }
.cifra span { display: block; margin-top: 8px; color: var(--gris); font-weight: 700; font-size: .9rem; }

/* ── Secciones ── */
.seccion { padding: 100px 0; }
.seccion-arena { background: var(--arena); }
.cabeza { text-align: center; max-width: 720px; margin: 0 auto 50px; }
.cabeza p:not(.etiqueta) { color: var(--gris); }
.dos-col { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; }
.dos-col > div > p:not(.etiqueta) { color: #4a3b33; }
.foto-marco { position: relative; isolation: isolate; }
.foto-marco img { border-radius: var(--radio); box-shadow: var(--sombra); width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.foto-marco::before { content: ''; position: absolute; inset: 18px -18px -18px 18px; border: 2px solid var(--oro); border-radius: var(--radio); z-index: -1; }
.foto-marco figcaption { position: absolute; left: 16px; bottom: 16px; background: rgba(42, 18, 8, .78); color: var(--blanco); font-size: .85rem; font-weight: 700; padding: 6px 14px; border-radius: 999px; }

.tarjetas-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 80px; }
.tarjeta { background: var(--blanco); border-radius: var(--radio); padding: 32px 28px; box-shadow: var(--sombra); border-top: 4px solid var(--oro); }
.tarjeta:nth-child(2) { border-top-color: var(--hoja); }
.tarjeta:nth-child(3) { border-top-color: var(--cacao-2); }
.tarjeta p, .valores { color: #4a3b33; font-size: .98rem; }
.valores { list-style: none; }
.valores li { padding: 4px 0 4px 22px; position: relative; }
.valores li::before { content: ''; position: absolute; left: 0; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--oro); }
.icono { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: var(--hoja-clara); margin-bottom: 16px; }
.icono svg { width: 28px; height: 28px; fill: none; stroke: var(--hoja); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tarjeta .icono svg { fill: var(--hoja); stroke: none; }

/* ── Línea de tiempo ── */
.linea { list-style: none; position: relative; max-width: 860px; margin: 0 auto; }
.linea::before { content: ''; position: absolute; left: 47px; top: 10px; bottom: 10px; width: 3px; background: linear-gradient(var(--oro), var(--hoja)); border-radius: 3px; }
.hito { display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: start; margin-bottom: 26px; }
.anio { position: relative; z-index: 1; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--cacao); color: var(--sol); font-family: var(--titulo); font-size: 1.35rem; font-weight: 700; box-shadow: 0 0 0 6px var(--arena), var(--sombra); }
.hito > div { background: var(--blanco); border-radius: var(--radio); padding: 22px 26px; box-shadow: var(--sombra); margin-top: 8px; }
.hito p { color: #4a3b33; font-size: .98rem; }

/* ── Fairtrade ── */
.fairtrade { background: linear-gradient(135deg, var(--cacao-osc), var(--cacao) 60%, var(--cacao-2)); color: var(--blanco); }
.fairtrade h2 { color: var(--blanco); }
.fairtrade .dos-col > div > p:not(.etiqueta) { color: rgba(255, 255, 255, .88); }
.lista-check { list-style: none; margin: 20px 0; }
.lista-check li { position: relative; padding: 8px 0 8px 36px; color: rgba(255, 255, 255, .9); }
.lista-check li::before { content: '✓'; position: absolute; left: 0; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--oro); color: var(--cacao-osc); display: grid; place-items: center; font-weight: 800; font-size: .8rem; }
.lista-check strong { color: var(--sol); }
.nota-flo { display: inline-block; margin-top: 8px; padding: 10px 18px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); font-size: .92rem; }
.fairtrade .foto-marco::before { border-color: var(--sol); }

/* ── Servicios ── */
.servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.servicio { background: var(--blanco); border-radius: var(--radio); padding: 30px 26px; box-shadow: var(--sombra); transition: transform .25s, box-shadow .25s; }
.servicio:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(58, 26, 14, .16); }
.servicio p { color: #4a3b33; font-size: .97rem; }
.servicio:nth-child(3n+2) .icono { background: #fdf1d6; }
.servicio:nth-child(3n+2) .icono svg { stroke: #b07a06; }
.servicio:nth-child(3n) .icono { background: #f3e2d8; }
.servicio:nth-child(3n) .icono svg { stroke: var(--cacao-2); }

/* ── Galería ── */
.filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 34px; }
.filtro { font-family: var(--texto); font-weight: 700; font-size: .92rem; padding: 9px 20px; border-radius: 999px; border: 1.5px solid var(--cacao-2); background: transparent; color: var(--cacao); cursor: pointer; transition: .2s; }
.filtro:hover { background: rgba(122, 59, 34, .08); }
.filtro.activo { background: var(--cacao); color: var(--blanco); border-color: var(--cacao); }
.galeria { columns: 4 240px; column-gap: 14px; }
.galeria button { display: block; width: 100%; margin-bottom: 14px; border: 0; padding: 0; background: var(--arena); border-radius: 14px; overflow: hidden; cursor: zoom-in; break-inside: avoid; position: relative; }
.galeria img { width: 100%; height: auto; transition: transform .4s; }
.galeria button:hover img { transform: scale(1.05); }
.galeria button::after { content: attr(data-texto); position: absolute; inset: auto 0 0; padding: 26px 12px 10px; font-size: .8rem; font-weight: 700; color: var(--blanco); background: linear-gradient(transparent, rgba(42, 18, 8, .8)); opacity: 0; transition: opacity .25s; text-align: left; }
.galeria button:hover::after { opacity: 1; }
.ver-mas { text-align: center; margin-top: 26px; }
.ver-mas a { color: var(--cacao); font-weight: 800; }

/* ── Contacto ── */
.contacto { background: var(--cacao-osc); color: var(--blanco); }
.contacto h2 { color: var(--blanco); }
.datos { list-style: none; margin: 10px 0 30px; }
.datos li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .9); }
.datos svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--sol); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.datos a { color: var(--blanco); text-decoration: none; font-weight: 700; word-break: break-word; }
.datos a:hover { color: var(--sol); }
.contacto .foto-marco::before { border-color: var(--sol); }

/* ── Pie ── */
.pie { background: #241008; color: rgba(255, 255, 255, .75); padding: 36px 0; font-size: .9rem; }
.pie-in { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pie strong { color: var(--blanco); }
.pie-copy { margin-left: auto; }

/* ── Visor de fotos ── */
.visor { position: fixed; inset: 0; z-index: 100; background: rgba(20, 8, 3, .94); display: flex; align-items: center; justify-content: center; padding: 20px; }
.visor[hidden] { display: none; }
.visor figure { max-width: min(1200px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.visor img { max-height: calc(100vh - 110px); width: auto; border-radius: 12px; }
.visor figcaption { color: rgba(255, 255, 255, .85); margin-top: 12px; font-weight: 700; }
.visor-cerrar, .visor-flecha { position: absolute; background: rgba(255, 255, 255, .12); color: var(--blanco); border: 0; cursor: pointer; border-radius: 50%; display: grid; place-items: center; transition: background .2s; }
.visor-cerrar:hover, .visor-flecha:hover { background: rgba(255, 255, 255, .25); }
.visor-cerrar { top: 18px; right: 18px; width: 48px; height: 48px; font-size: 2rem; line-height: 1; }
.visor-flecha { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 2.4rem; line-height: 1; }
.visor-flecha.izq { left: 18px; }
.visor-flecha.der { right: 18px; }

/* ── Aparición al desplazarse ── */
.revelar { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.revelar.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; transition: none; }
  .portada-fondo { animation: none; transform: none; }
  html { scroll-behavior: auto; }
}

/* ── Tablet y celular ── */
@media (max-width: 960px) {
  .menu-btn { display: flex; }
  .menu { position: fixed; top: 76px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--crema); box-shadow: 0 14px 30px rgba(58, 26, 14, .15); max-height: 0; overflow: hidden; transition: max-height .35s ease; }
  .menu.abierto { max-height: 420px; }
  .menu a { color: var(--cacao) !important; padding: 15px 24px; width: 100%; border-top: 1px solid var(--arena); }
  .menu a::after { display: none; }
  .menu .menu-cta { border-radius: 0; }
  .barra.menu-abierto { background: var(--crema); }
  .barra.menu-abierto .marca { color: var(--cacao); }
  .barra.menu-abierto .menu-btn span { background: var(--cacao); }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .dos-col { grid-template-columns: 1fr; gap: 50px; }
  .fairtrade .dos-col .foto-marco, .contacto .dos-col .foto-marco { order: 2; }
  .tarjetas-3, .servicios { grid-template-columns: 1fr 1fr; }
  .cifras-grid { grid-template-columns: 1fr 1fr; }
  .cifra:nth-child(2) { border-right: 0; }
  .cifra:nth-child(-n+2) { border-bottom: 1px solid var(--arena); }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .marca small { display: none; }
  .seccion { padding: 72px 0; }
  .portada-in { padding: 120px 0 130px; }
  .tarjetas-3, .servicios { grid-template-columns: 1fr; }
  .foto-marco::before { inset: 12px -10px -12px 10px; }
  .linea::before { left: 31px; }
  .hito { grid-template-columns: 64px 1fr; gap: 14px; }
  .anio { width: 64px; height: 64px; font-size: 1rem; }
  .hito > div { padding: 18px; margin-top: 0; }
  .pie-copy { margin-left: 0; }
  .visor-flecha { width: 44px; height: 44px; font-size: 2rem; top: auto; bottom: 18px; transform: none; }
}