/* Vivero Las Acacias · capa visual v2 (se carga después de estilos.css) */
:root{--ease:cubic-bezier(0.23,1,0.32,1);--sombra:0 1px 2px rgb(19 59 33/.08),0 14px 30px -16px rgb(19 59 33/.4);--radio:18px;--noche:#0b2416}
html{scroll-behavior:smooth;scroll-padding-top:5rem;accent-color:var(--color-hoja)}
body{background:linear-gradient(#fff,#f3f8f0 45%);-webkit-tap-highlight-color:transparent;font-optical-sizing:auto;caret-color:var(--color-hoja)}
h1,h2,h3{letter-spacing:-.022em;text-wrap:balance}
small,.campo__ayuda,.tarjeta__presentacion,.contador{letter-spacing:.008em}
::selection{background:var(--color-araguaney);color:var(--color-tinta)}
*{scrollbar-color:#8fb48f transparent}

/* ---------- Material: encabezado de vidrio ---------- */
.encabezado{position:sticky;top:0;z-index:20;border:0;view-transition-name:encabezado;
 background:rgb(255 255 255/.72);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
 box-shadow:inset 0 -1px 0 rgb(19 59 33/.06);transition:box-shadow .3s var(--ease),background-color .3s}
html.bajo .encabezado{box-shadow:inset 0 -1px 0 rgb(19 59 33/.1),0 12px 28px -18px rgb(19 59 33/.5)}
.encabezado--panel{background:rgb(19 59 33/.82);box-shadow:inset 0 1px 0 rgb(255 255 255/.14)}
.navegacion a{padding-inline:.95rem;border-radius:999px;border-bottom:0;transition:background-color .2s var(--ease),color .2s}
.navegacion a[aria-current="page"]{background:var(--color-hoja);color:#fff}
.encabezado--panel .navegacion a[aria-current="page"]{background:var(--color-araguaney);color:var(--color-tinta)}
@media (hover:hover) and (pointer:fine){.navegacion a:hover{background:var(--color-hoja-clara)}.navegacion a[aria-current="page"]:hover{background:var(--color-hoja-oscura)}.encabezado--panel .navegacion a:hover{background:rgb(255 255 255/.16)}.encabezado--panel .navegacion a[aria-current="page"]:hover{background:#ffd93d}}
@media (prefers-reduced-transparency:reduce){.encabezado{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}.encabezado--panel{background:var(--color-hoja-oscura)}}
@media (prefers-contrast:more){.encabezado{background:#fff}.encabezado--panel{background:var(--color-hoja-oscura)}}

/* ---------- Botones: responden al toque, no al soltar ---------- */
.boton{border-radius:999px;padding-inline:1.3rem;box-shadow:0 1px 0 rgb(255 255 255/.25) inset,0 6px 14px -8px rgb(19 59 33/.6);touch-action:manipulation;transition:transform .1s ease-out,background-color .2s,box-shadow .2s}
.boton:active{transform:scale(.96);box-shadow:none}
.boton--claro{background:var(--color-araguaney);border-color:var(--color-araguaney);color:var(--color-tinta)}
.boton--claro:hover{background:#ffd93d;border-color:#ffd93d;color:var(--color-tinta)}
.boton--fantasma{background:rgb(255 255 255/.08);border-color:rgb(255 255 255/.55);color:#fff;box-shadow:none}
.boton--fantasma:hover{background:rgb(255 255 255/.18);color:#fff}

/* ---------- Portada ---------- */
.hero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(52rem 30rem at 82% 38%,#2f8450 0,transparent 62%),radial-gradient(34rem 22rem at 0 100%,#071c0f 0,transparent 70%),linear-gradient(#163f25,#0f3019)}
.hero__fila{display:grid;gap:var(--espacio-4);align-items:center;padding-block:var(--espacio-6) var(--espacio-5)}
.hero h1{font-size:clamp(2.75rem,1.6rem + 5.6vw,5.25rem);line-height:1.02;letter-spacing:-.035em;max-width:11ch;margin-bottom:var(--espacio-4)}
.hero .pagina__intro{color:#e4f0df;max-width:32rem;line-height:1.55}
.hero__acciones{display:flex;flex-wrap:wrap;gap:var(--espacio-3);margin-top:var(--espacio-5)}
.hero__escena{position:relative;aspect-ratio:1;width:min(100%,34rem);margin-inline:auto;will-change:transform}
#flor3d{width:100%;height:100%;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
#flor3d:active{cursor:grabbing}
.hero__pista{position:absolute;inset:auto 0 .5rem;margin:0;text-align:center;font-size:var(--texto-xs);color:#cfe3c9}
@media (min-width:52rem){.hero__fila{grid-template-columns:1.05fr 1fr;padding-block:var(--espacio-7)}}
@media (prefers-reduced-motion:no-preference){
 .hero__texto>*{animation:entra .9s var(--ease) backwards}
 .hero__texto>:nth-child(2){animation-delay:.1s}.hero__texto>:nth-child(3){animation-delay:.2s}
 @keyframes entra{from{opacity:0;transform:translateY(16px);filter:blur(6px)}}
}
.temporada{background:linear-gradient(100deg,#f5c518,#ffdf5e)}
.temporada__dias{text-shadow:0 2px 0 rgb(255 255 255/.35)}

/* ---------- Pantalla de carga: atardecer en el Llano ---------- */
#carga{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;color:#fff;text-align:center;
 background:radial-gradient(70% 45% at 50% 108%,rgb(245 197 24/.3),transparent 70%),radial-gradient(90% 60% at 50% 120%,#2f8450,transparent 65%),linear-gradient(#0b2416,#143c24);
 transition:opacity .65s var(--ease),transform .65s var(--ease),filter .65s var(--ease)}
#carga.sale{opacity:0;transform:scale(1.04);filter:blur(10px);pointer-events:none}
.rapida #carga{animation:tarde .01s .5s backwards}   /* si la página ya cargó antes, solo aparece si tarda */
@keyframes tarde{from{opacity:0;visibility:hidden}}
#carga{animation:seguridad .01s 8s forwards}          /* si falla el JavaScript, nunca bloquea el sitio */
@keyframes seguridad{to{opacity:0;visibility:hidden;pointer-events:none}}
.rapida #carga{animation:tarde .01s .5s backwards,seguridad .01s 8s forwards}
.carga__centro{position:relative;display:grid;justify-items:center;gap:.25rem}
.carga__planta{width:min(46vw,12.5rem);height:auto;overflow:visible}
.carga__marca{margin:.5rem 0 0;font-size:var(--texto-xl);font-weight:700;letter-spacing:-.01em}
.carga__msg{margin:0;color:#cfe3c9;font-size:var(--texto-s);letter-spacing:.01em}
.carga__luciernagas{position:absolute;inset:0;pointer-events:none}
.carga__luciernagas i{position:absolute;width:6px;height:6px;border-radius:50%;background:#ffe27a;box-shadow:0 0 12px 4px rgb(255 226 122/.55);opacity:0}
.c-tallo{stroke-dasharray:1;stroke-dashoffset:0}
.c-hoja,.c-petalo,.c-flor-in{transform-box:fill-box}
.c-hoja--i{transform-origin:100% 100%}.c-hoja--d{transform-origin:0 100%}
.c-petalo{transform-origin:50% 100%}.c-flor-in{transform-origin:50% 50%}
.c-planta{transform-origin:50% 100%;transform-box:fill-box}
@media (prefers-reduced-motion:no-preference){
 .c-tallo{animation:dibuja 1s var(--ease) .2s backwards}
 .c-hoja{animation:brota .8s cubic-bezier(.34,1.56,.64,1) backwards}
 .c-hoja--i{animation-delay:.8s}.c-hoja--d{animation-delay:1s}
 .c-flor-in{animation:brota .9s cubic-bezier(.34,1.56,.64,1) 1.15s backwards}
 .c-petalo{animation:brota .7s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(1.3s + var(--k)*.07s)}
 .c-planta{animation:balanceo 5s ease-in-out 2.3s infinite alternate}
 .carga__marca,.carga__msg{animation:entra .9s var(--ease) 1.6s backwards}
 .carga__luciernagas i{animation:deriva var(--d) ease-in-out var(--w) infinite alternate,parpadeo 2.6s ease-in-out var(--w) infinite}
 @keyframes dibuja{from{stroke-dashoffset:1}}
 @keyframes brota{from{transform:scale(0)}}
 @keyframes balanceo{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
 @keyframes deriva{to{transform:translate(var(--x),var(--y))}}
 @keyframes parpadeo{0%,100%{opacity:0}50%{opacity:.95}}
}

/* ---------- Cargadores dentro de la página: una plántula que crece ---------- */
.cargador{width:3.5rem;height:4.4rem;border:0;border-radius:0;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 80'%3E%3Cpath d='M32 78V30' stroke='%232f7d46' stroke-width='4' stroke-linecap='round' fill='none'/%3E%3Cpath d='M31 52C14 52 6 40 6 28c16 0 24 8 25 24z' fill='%233f9a5d'/%3E%3Cpath d='M33 40c16 0 26-9 26-22-16 0-25 8-26 22z' fill='%232f7d46'/%3E%3Ccircle cx='32' cy='24' r='7' fill='%23f5c518'/%3E%3C/svg%3E") center/contain no-repeat}
@media (prefers-reduced-motion:no-preference){.cargador{animation:crece 1.9s var(--ease) infinite}
 @keyframes crece{0%{clip-path:inset(100% 0 0 0);opacity:1}55%,82%{clip-path:inset(0);opacity:1}100%{clip-path:inset(0);opacity:0}}}

/* ---------- Catálogo ---------- */
.filtros{border:0;border-radius:var(--radio);background:#fff;box-shadow:var(--sombra)}
.rejilla{gap:var(--espacio-5)}
.tarjeta{position:relative;border:0;border-radius:var(--radio);box-shadow:var(--sombra);transition:box-shadow .3s var(--ease)}
.tarjeta::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--g,0);transition:opacity .3s;
 background:radial-gradient(16rem 12rem at var(--gx,50%) var(--gy,0%),rgb(255 255 255/.42),transparent 62%)}
.tarjeta__imagen{transition:transform .7s var(--ease)}
.tarjeta__precio{color:var(--color-hoja);letter-spacing:-.02em}
.disponibilidad{border-radius:999px;padding-inline:.7rem}
@media (hover:hover) and (pointer:fine){.tarjeta:hover{box-shadow:0 2px 4px rgb(19 59 33/.1),0 28px 48px -20px rgb(19 59 33/.55)}.tarjeta:hover .tarjeta__imagen{transform:scale(1.07)}}
.rejilla>li.pre{opacity:0;transform:translateY(22px) scale(.98)}
.rejilla>li.pre.ya{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* ---------- Formularios, detalle y panel ---------- */
.campo input,.campo select,.campo textarea{border-radius:12px;transition:box-shadow .2s,border-color .2s}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{outline:0;border-color:var(--color-hoja);box-shadow:0 0 0 4px rgb(30 86 49/.28)}
fieldset{border:0;border-radius:var(--radio);background:#fff;box-shadow:var(--sombra)}
.detalle__imagen{border-radius:26px;box-shadow:var(--sombra)}
.consulta{border-radius:var(--radio);border-width:0;background:var(--color-hoja-clara)}
.resumen div{border:0;border-radius:var(--radio);background:#fff;box-shadow:var(--sombra)}
.resumen dd{letter-spacing:-.03em}
.alerta{border-radius:14px;border-left-width:1px;box-shadow:var(--sombra)}
.tabla thead th{background:var(--color-hoja-clara)}
.estado{border-radius:var(--radio)}
@media (hover:hover){.tabla tbody tr:hover{background:var(--color-superficie)}}

/* ---------- Pie ---------- */
.pie{background:var(--color-hoja-oscura);color:#dcebd6;border:0}
.pie a:not(.boton){color:#fff}.pie__creditos{color:#b9d1b3}

/* ---------- Transición entre páginas (el encabezado se queda quieto) ---------- */
@view-transition{navigation:none}
::view-transition-old(root){animation:.25s var(--ease) both fuera}::view-transition-new(root){animation:.4s var(--ease) both dentro}
@keyframes fuera{to{opacity:0;transform:scale(.99)}}@keyframes dentro{from{opacity:0;transform:translateY(10px)}}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{transition-duration:.01ms!important;scroll-behavior:auto!important}
 @view-transition{navigation:none}
 .rejilla>li.pre{opacity:1;transform:none}
}

/* ---------- Fondo vivo: hojas y pétalos detrás del contenido ---------- */
#fondo-vivo{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}