/* Linajes Terra · detalles de calma y cariño */

/* 6. Transición suave del color de fondo al bajar */
body.mercado { transition: background-color 1.6s ease; }

/* 2. Entrada: la ramita se dibuja y aparece el logo */
.intro {
  position: fixed; inset: 0; z-index: 100; background: #E9E1D3; display: grid; place-items: center;
  transition: opacity .9s ease, visibility .9s;
}
.intro.salir { opacity: 0; visibility: hidden; }
.intro-centro { display: grid; justify-items: center; gap: 18px; }
.intro svg { width: min(360px, 74vw); color: #C66A45; }
.intro svg path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trazo 2.2s ease-in-out forwards; }
.intro svg path:nth-child(2) { animation-delay: .5s; }
.intro svg path:nth-child(3) { animation-delay: .8s; }
.intro svg path:nth-child(4) { animation-delay: 1.1s; }
.intro svg path:nth-child(5) { animation-delay: 1.4s; }
.intro svg path:nth-child(6) { animation-delay: 1.2s; }
.intro img { width: min(260px, 60vw); opacity: 0; filter: sepia(.6) brightness(.55); animation: aparece 1.2s ease 1.9s forwards; }
.intro small { font: 500 .7rem Montserrat, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #8E6E50; opacity: 0; animation: aparece 1s ease 2.3s forwards; }
@keyframes trazo { to { stroke-dashoffset: 0; } }
@keyframes aparece { to { opacity: 1; } }

/* 1. Luz entre hojas sobre la portada */
.hero-m { position: relative; }
.luz-hojas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 30px; z-index: 2; mix-blend-mode: multiply; }
.luz-hojas img { position: absolute; filter: brightness(0) blur(9px); opacity: .13; }
.luz-hojas img:nth-child(1) { width: 62%; left: -8%; top: -18%; transform: rotate(-20deg); animation: mecer 19s ease-in-out infinite alternate; }
.luz-hojas img:nth-child(2) { width: 48%; right: -6%; top: 20%; transform: scaleX(-1) rotate(12deg); animation: mecer2 23s ease-in-out infinite alternate; }
.luz-hojas img:nth-child(3) { width: 40%; left: 30%; bottom: -24%; transform: rotate(160deg); animation: mecer 27s ease-in-out infinite alternate-reverse; opacity: .09; }
@keyframes mecer { from { translate: 0 0; rotate: 0deg; } to { translate: 26px 14px; rotate: 4deg; } }
@keyframes mecer2 { from { translate: 0 0; rotate: 0deg; } to { translate: -22px 18px; rotate: -5deg; } }

/* 4. Una pausa para respirar */
.respira { background: transparent; text-align: center; }
.respira-grid { display: grid; justify-items: center; gap: 28px; }
.respira-circulo {
  width: 170px; height: 170px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: radial-gradient(circle, rgba(198,106,69,.22), rgba(198,106,69,.06) 70%);
  border: 1px solid rgba(198,106,69,.35);
  animation: respirar 10s ease-in-out infinite;
}
.respira-circulo::after { content: ""; position: absolute; inset: -18px; border-radius: 50%; border: 1px solid rgba(110,115,83,.25); animation: respirar 10s ease-in-out infinite .4s; }
.respira-txt { position: absolute; font: 500 .72rem Montserrat, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #8E6E50; }
.respira-txt.inhala { animation: inhala 10s linear infinite; }
.respira-txt.exhala { animation: exhala 10s linear infinite; opacity: 0; }
@keyframes respirar { 0%, 100% { transform: scale(.82); } 40%, 50% { transform: scale(1.12); } }
@keyframes inhala { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes exhala { 0%, 45% { opacity: 0; } 50%, 95% { opacity: 1; } 100% { opacity: 0; } }
.respira blockquote { margin: 0 auto; max-width: 22ch; font: 500 clamp(2rem, 4.4vw, 3.4rem)/1.15 var(--serif); color: var(--carbon); }
.respira .firma { color: var(--barro); font: 600 .72rem var(--sans); letter-spacing: .26em; text-transform: uppercase; margin-top: 18px; }

/* 7. Hojita que vuela al carrito y latido del botón */
.hoja-vuela { position: fixed; z-index: 70; width: 62px; height: 62px; filter: drop-shadow(0 3px 6px rgba(59,42,30,.25)); color: #6E7353; pointer-events: none; transform: translate(-50%, -50%); }
.hoja-vuela svg { width: 100%; height: 100%; }
.latido { animation: latido .6s ease; }
@keyframes latido { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 70% { transform: scale(.96); } 100% { transform: scale(1); } }

/* Gracias al enviar */
.gracias-modal { position: fixed; inset: 0; z-index: 80; background: rgba(59,42,30,.45); display: grid; place-items: center; padding: 20px; opacity: 0; transition: opacity .4s; }
.gracias-modal.visible { opacity: 1; }
.gracias-caja { background: #F3EDE3; border-radius: 30px; padding: 36px 34px 30px; max-width: 420px; text-align: center; transform: translateY(14px); transition: transform .4s; }
.gracias-modal.visible .gracias-caja { transform: none; }
.gracias-ilus { display: block; width: 150px; margin: 0 auto 10px; color: #C66A45; }
.gracias-caja h3 { font-size: 2.2rem; margin-bottom: 8px; }
.gracias-caja p { color: #5A3E2B; margin-bottom: 22px; }
.gracias-caja .btn { background: #C66A45; color: #F3EDE3; }

/* 8. Ilustraciones de línea */
[data-ilustracion] { display: block; }
[data-ilustracion] svg { width: 100%; height: auto; display: block; }
.arco-ilus { display: grid; place-items: center; }
.arco-ilus [data-ilustracion] { width: 58%; color: #F3EDE3; }
.carrito-vacio-ilus { width: 140px; margin: 10px auto 6px; color: #C66A45; }

@media (prefers-reduced-motion: reduce) {
  .respira-circulo, .respira-circulo::after, .respira-txt { animation: none !important; }
  .respira-txt.exhala { display: none; }
}

/* Cambio suave de foto al elegir versión */
.marco-grande img { transition: opacity .18s ease; }
.marco-grande img.cambiando { opacity: 0; }

/* ===== Ilustraciones que se dibujan solas al llegar a ellas ===== */
.trazo:not(.visto) svg { opacity: 0; }
.trazo svg .relleno, .trazo svg [fill="currentColor"] { transition: opacity .8s ease 1.4s; }
.trazo:not(.visto) svg [fill="currentColor"] { opacity: 0; }
svg .punteado { stroke-dasharray: 2 6; }

/* dibujo dentro de los marcos sin foto y en las categorías */
.marco-ilus { display: grid; place-items: center; width: 74%; margin: auto; height: 100%; opacity: .85; }
.marco .marco-ilus svg { max-height: 100%; }
.mercado .tarjeta .marco:has(.marco-ilus) { display: grid; place-items: center; }
.marco > img:not(.marco-ramita) { object-position: center; }
.hero-m .categoria .arco > span { display: block; width: 100%; opacity: .5; }
.hero-m .categoria .arco { max-width: 210px; }
.vacio-ilus { display: block; width: min(240px, 70%); margin: 0 auto 18px; color: var(--arcilla); }
p.vacio .vacio-ilus { margin-bottom: 14px; }

/* bandas de páginas internas */
.banda-ilus { position: absolute; right: 4%; bottom: 0; width: min(34vw, 330px); color: var(--adobe-claro); opacity: .55; pointer-events: none; }
@media (max-width: 760px) { .banda-ilus { width: 46vw; opacity: .22; right: -4%; } }

/* 4 elementos */
.elem-ilus { display: block; width: 54px; margin-bottom: 10px; color: var(--arcilla); }
.elementos-ing { margin: 0 0 40px; }

/* ingredientes */
.ing-planta { float: right; width: 92px; margin: 0 0 8px 16px; color: var(--musgo); }
@media (max-width: 760px) { .ing-planta { width: 64px; } }

/* ===== Semillas que flotan ===== */
[data-semillas] { position: relative; overflow: hidden; }
[data-semillas] > .contenedor { position: relative; z-index: 1; }
.semillas { position: absolute; inset: 0; pointer-events: none; z-index: 0; color: var(--barro); }
.semillas span { position: absolute; bottom: -90px; width: 30px; opacity: 0; animation: flotar var(--d) linear var(--r) infinite; scale: var(--t); }
@keyframes flotar {
  0% { transform: translate(0, 0) rotate(-10deg); opacity: 0; }
  10% { opacity: .32; }
  50% { transform: translate(38px, -55vh) rotate(14deg); }
  90% { opacity: .28; }
  100% { transform: translate(-12px, -110vh) rotate(-8deg); opacity: 0; }
}

/* ===== Tarjetas que respiran ===== */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mercado .tarjeta { transform-origin: 50% 100%; }
  .mercado .tarjeta:hover { animation: hoja-mece 3.6s ease-in-out infinite; }
}
@keyframes hoja-mece { 0%, 100% { transform: translateY(-3px) rotate(-.7deg); } 50% { transform: translateY(-6px) rotate(.7deg); } }

/* agotado */
.tarjeta-agotada .marco-ilus { opacity: .9; }
.tarjeta-agotada .tarjeta-desc { font-style: italic; }
.agotado-aviso { background: var(--adobe-claro); border: 1.5px dashed var(--barro); border-radius: 22px; padding: 20px 22px; margin: 14px 0 18px; display: grid; gap: 12px; }
.agotado-aviso > span { width: 170px; color: var(--arcilla); }
.agotado-aviso p { margin: 0; }

/* ===== Carrito que florece ===== */
.btn-carrito { position: relative; overflow: visible; }
.mercado .btn-carrito { margin-left: 34px; }
.ramo { position: absolute; left: -32px; top: 50%; margin-top: -20px; width: 34px; height: 34px; color: var(--musgo); pointer-events: none; }
.ramo svg { width: 100%; height: 100%; overflow: visible; }
.ramo .h { fill: var(--musgo); stroke: none; transform-origin: 0 0; transform: scale(0); transition: transform .6s cubic-bezier(.3,1.6,.5,1); }
.ramo[data-hojas="0"] { opacity: 0; }
.ramo[data-hojas="1"] .h1, .ramo[data-hojas="2"] :is(.h1,.h2), .ramo[data-hojas="3"] :is(.h1,.h2,.h3),
.ramo[data-hojas="4"] :is(.h1,.h2,.h3,.h4), .ramo[data-hojas="5"] :is(.h1,.h2,.h3,.h4,.h5),
.ramo[data-hojas="6"] :is(.h1,.h2,.h3,.h4,.h5,.h6), .ramo[data-hojas="7"] :is(.h1,.h2,.h3,.h4,.h5,.h6,.h7),
.ramo[data-hojas="8"] .h { transform: scale(1); }
.ramo { transition: opacity .4s; }

/* ===== Precio que germina ===== */
.producto-precio { position: relative; }
.producto-precio.germina { animation: germinar .7s ease; }
.producto-precio.germina::before {
  content: ""; position: absolute; left: -26px; bottom: .25em; width: 20px; height: 26px; transform-origin: 50% 100%;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26' fill='none' stroke='%236E7353' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M10 25 C10 18 10 13 11 8'/%3E%3Cpath d='M10.5 13 C5 10 3 6 4 3 C8 4 10 8 10.5 13'/%3E%3Cpath d='M11 10 C14 6 17 5 19 6 C17 9 14 11 11 10'/%3E%3C/svg%3E");
  animation: brotar 1.4s ease forwards;
}
@keyframes germinar { 0% { opacity: .2; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes brotar { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ===== Ritual según la hora ===== */
.ritual-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.ritual-ilus { display: block; width: 110px; margin-bottom: 10px; color: var(--ocre, #C9A15B); }
.ritual-texto p:last-child { max-width: 36ch; }
.ritual-noche { background: var(--mar) var(--grano-m); color: var(--adobe-claro); }
.ritual-noche .ritual-ilus { color: var(--arena, #E3C9A0); }
.ritual-noche .caps-m { color: inherit; opacity: .8; }
.ritual-manana { background: #F1E4C8 var(--grano-m); }
.ritual-noche .semillas { color: var(--arena); }
@media (max-width: 860px) { .ritual-grid { grid-template-columns: 1fr; gap: 24px; } }

/* ===== Rueda de aromas ===== */
.aromas-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.rueda { position: relative; width: min(480px, 100%); aspect-ratio: 1; margin: 28px auto 0; color: var(--barro); }
.rueda-aro { position: absolute; inset: 4%; transition: transform 1s cubic-bezier(.4,0,.2,1); }
.rueda-aro .rueda-marca { color: var(--arcilla); fill: var(--arcilla); }
.rueda-centro { position: absolute; inset: 0; margin: auto; width: 46%; height: 46%; display: grid; place-items: center; text-align: center; align-content: center; gap: 4px; color: var(--musgo); pointer-events: none; }
.rueda-centro > span { width: 50%; display: block; }
.rueda-centro b { font: 600 1.4rem var(--serif); color: var(--carbon); }
.rueda-aroma {
  position: absolute; min-width: 70px; height: 34px; padding: 0 14px; white-space: nowrap; translate: -50% -50%; border-radius: 999px;
  border: 1.5px solid var(--barro); background: var(--adobe-claro); color: var(--barro-osc); cursor: pointer;
  font: 600 .66rem var(--sans); letter-spacing: .08em; text-transform: uppercase; transition: background .3s, color .3s, scale .3s;
}
.rueda-aroma:hover { scale: 1.06; }
.rueda-aroma[aria-pressed="true"] { background: var(--arcilla); color: var(--adobe-claro); border-color: var(--arcilla); }
@media (max-width: 860px) { .aromas-grid { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 480px) { .rueda { width: 84%; } .rueda-aroma { min-width: 0; height: 28px; padding: 0 9px; font-size: .54rem; letter-spacing: .04em; } }

/* ===== Cindy ===== */
.cindy-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.cindy-foto { position: relative; margin: 0; max-width: 360px; }
.cindy-foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 999px 999px 30px 30px; display: block; background: var(--arena, #E3C9A0); }
.cindy-trazo { position: absolute; width: 46%; right: -18%; bottom: -6%; color: var(--arcilla); }
@media (max-width: 760px) { .cindy-grid { grid-template-columns: 1fr; gap: 32px; } .cindy-foto { max-width: 260px; } .cindy-trazo { right: -12%; } }

/* ===== Botón de sonido ===== */
.btn-sonido {
  position: fixed; left: 20px; bottom: 82px; z-index: 25; height: 48px; padding: 0 16px 0 10px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--adobe-claro); color: var(--barro-osc); border: 1.5px solid var(--barro); box-shadow: 0 6px 20px rgba(42,33,25,.18);
  font: 600 .66rem var(--sans); letter-spacing: .14em; text-transform: uppercase; transition: background .3s, color .3s;
}
.btn-sonido svg { width: 30px; height: 30px; }
.btn-sonido .onda { opacity: 0; }
.btn-sonido.activo { background: var(--musgo); color: var(--adobe-claro); border-color: var(--musgo); }
.btn-sonido.activo .onda { animation: onda 2.8s ease-in-out infinite; }
.btn-sonido.activo .o2 { animation-delay: .6s; }
@keyframes onda { 0%, 100% { opacity: 0; transform: translateY(2px); } 50% { opacity: 1; transform: none; } }
@media (max-width: 760px) { .btn-sonido span { display: none; } .btn-sonido { padding: 0 9px; bottom: 76px; } }

@media (prefers-reduced-motion: reduce) {
  .semillas { display: none; }
  .rueda-aro, .ramo .h { transition: none; }
  .producto-precio.germina, .producto-precio.germina::before { animation: none; }
}

/* TikTok con el reproductor oficial */
.pub-tiktok { display: grid; gap: 10px; justify-items: center; }
.pub-tiktok iframe { width: 100%; max-width: 330px; aspect-ratio: 9 / 16; border: 0; border-radius: 14px; background: #000; }
.pub-enlace { min-height: 200px; place-content: center; border: 1.5px dashed var(--barro); border-radius: 14px; }

/* ===== Fotos: todas en el mismo marco, ocupando el arco completo de la tarjeta ===== */
.mercado .tarjeta .marco { width: calc(100% + 36px); margin: -22px -18px 12px; aspect-ratio: 4 / 3; border-radius: 999px 999px 0 0; }
.mercado .tarjeta-link:hover .marco { transform: none; }
.mercado .tarjeta .marco > img:not(.marco-ramita) { border-radius: 0; transition: transform .6s ease; }
.mercado .tarjeta-link:hover .marco > img { transform: scale(1.04); }
.mercado .tarjeta .marco-ilus { width: 56%; height: 84%; margin-top: 8%; }
img[src$="#arriba"] { object-position: center 12% !important; }
img[src$="#abajo"] { object-position: center 88% !important; }
img[src$="#izquierda"] { object-position: 15% center !important; }
img[src$="#derecha"] { object-position: 85% center !important; }

/* Ferias: misma proporción en el inicio y en su página */
.card-feria .foto-card { aspect-ratio: 4 / 5; }
.feria-destacada .card { align-items: stretch; }
.feria-destacada .foto-card { flex: 0 0 42%; aspect-ratio: 4 / 5; min-height: 0; }
@media (max-width: 860px) { .feria-destacada .foto-card { flex: none; width: 100%; aspect-ratio: 4 / 5; max-height: 72vh; } }

/* ===== Portada: rama que se dibuja y textos mejor ubicados ===== */
.hero-m { max-width: 1760px; margin: 0 auto; }
.bloque-m.principal { padding: clamp(32px, 5vw, 76px); justify-content: center; gap: clamp(20px, 3vw, 34px); }
.bloque-m.principal > :not(.hero-rama):not(.sello) { position: relative; z-index: 2; }
.bloque-m .logo { width: min(340px, 70%); }
.hero-rama { position: absolute; right: 4%; top: 4%; height: 92%; width: auto; aspect-ratio: 3 / 5; color: var(--adobe-claro); opacity: .5; pointer-events: none; z-index: 1; }
.hero-rama svg { height: 100%; width: auto; transform-origin: 85% 100%; }
.hero-rama.visto svg { animation: rama-mece 9s ease-in-out 3.2s infinite alternate; }
@keyframes rama-mece { from { transform: rotate(0deg); } to { transform: rotate(-2.2deg); } }
.sello { z-index: 3; }
@media (max-width: 1100px) { .hero-rama { opacity: .32; right: -6%; } }
@media (max-width: 600px) { .hero-rama { opacity: .22; height: 70%; top: auto; bottom: 2%; right: -14%; } .bloque-m .logo { width: min(260px, 78%); } }
@media (prefers-reduced-motion: reduce) { .hero-rama.visto svg { animation: none; } }

/* ===== Ajustes para que nada se salga en pantallas pequeñas ===== */
html, body { overflow-x: clip; }
img, svg, iframe { max-width: 100%; }
@media (max-width: 420px) {
  .mercado .tarjeta { padding: 18px 12px 14px; }
  .mercado .tarjeta .marco { width: calc(100% + 24px); margin: -18px -12px 10px; }
  .mercado .tarjeta h3 { font-size: 1.15rem; }
  .mercado .tarjeta .btn-mini { padding: .9em .4em; letter-spacing: .1em; }
  .mercado .tarjeta-precio { width: 58px; height: 58px; font-size: .8rem; }
  .btn-sonido { left: 14px; }
}

/* si una foto no carga, no se muestra el texto alternativo encima del diseño */
.marco img, .foto-card img { color: transparent; }
/* menú más compacto en pantallas medianas */
@media (max-width: 1360px) and (min-width: 981px) {
  .mercado .menu a { padding: 8px 10px; font-size: .7rem; letter-spacing: .08em; white-space: nowrap; }
  .mercado .barra-logo img { width: 90px; }
}
/* la foto siempre llena su marco y respeta el encuadre */
.foto-card > .foto-btn { position: absolute; inset: 0; }
.foto-btn img { display: block; }
@media (max-width: 600px) {
  .sello { width: 92px; height: 92px; padding: 12px; top: 16px; right: 16px; bottom: auto; }
  .sello b { font-size: .8rem; }
  .hero-m .categoria b { font-size: clamp(1.25rem, 6.2vw, 1.7rem); overflow-wrap: anywhere; }
  .hero-m .categoria { padding: 18px; }
}
/* la foto llena el marco completo (antes asomaba solo la parte de arriba de las fotos verticales) */
.marco > img:not(.marco-ramita) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Secciones que Cindy apaga desde el Sheet */
.apagada { display: none !important; }
.hero-m.sin-categorias { grid-template-columns: 1fr; }

/* Pie de página compacto en celular */
@media (max-width: 760px) {
  .mercado .pie { margin: 8px; padding: 34px 0 16px; }
  .pie-grid { grid-template-columns: 1fr; gap: 14px; text-align: center; justify-items: center; }
  .pie-marca { grid-column: auto; display: grid; justify-items: center; gap: 6px; }
  .pie-logo { width: 120px; margin: 0; }
  .pie-marca p { margin: 0; font-size: .82rem; line-height: 1.35; }
  .pie h3 { display: none; }
  .pie .datos { gap: 2px; font-size: .86rem; justify-items: center; }
  .pie-pagos, .pie-grid > div:last-child { display: none; }
  .pie-grid > div:nth-child(3) .datos { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
  .pie-final { margin-top: 20px; padding-top: 12px; font-size: .76rem; justify-content: center; text-align: center; gap: 4px 12px; }
}

/* Página 404 */
.pagina-404 { text-align: center; min-height: 70vh; display: grid; align-items: center; }
.pagina-404 .contenedor { display: grid; justify-items: center; gap: 14px; }
.ilus-404 { display: block; width: min(320px, 80%); color: var(--arcilla); margin-bottom: 8px; }
.pagina-404 h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 16ch; margin: 0; }
.pagina-404 p:not(.caps-m) { max-width: 46ch; margin: 0; }
.botones-404 { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 10px; }