/* Landing de eventos de empresa - Finca La Machota
 *
 * El diseno aprobado vive en los atributos style de la vista. Aqui solo esta
 * lo que un atributo no puede expresar: estados (hover, focus, acordeon),
 * animaciones y los tres elementos que anade la web real y el canvas no
 * tenia (error de formulario, trampa antibots y aviso de cookies).
 */

/* ---------------------------------------------------------------- base
 * Tal cual venia del diseno. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Raleway dibuja por defecto cifras de estilo antiguo, con alturas desiguales:
   se fuerzan cifras rectas para telefonos, precios y medidas. */
body{margin:0;background:#EFEDE6;color:#222522;font-family:'Raleway',system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
a{color:#26382E;text-decoration:none}
a:hover{color:#586540}
input,select,textarea,button{font-family:inherit;font-size:inherit;color:inherit}
img{max-width:100%}

@keyframes flmKen{0%{transform:scale(1) translate3d(0,0,0)}100%{transform:scale(1.09) translate3d(0,-1.2%,0)}}
@keyframes flmMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes flmRule{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}

/* Quien pide menos movimiento no ve ninguno, incluido el carrusel. */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

[hidden]{display:none !important}

/* Foco visible para quien navega con teclado. El diseno no lo contemplaba
 * y sin esto la landing es inservible sin raton. */
:focus-visible{outline:2px solid #586540;outline-offset:3px}

/* ------------------------------------------------- estados hover y focus
 * Venian como atributos style-hover / style-focus, que solo entiende el
 * lienzo de diseno. Llevan !important porque compiten con un atributo style. */
.e1:hover{background:#1C2A22 !important;color:#F7F5EF !important}
.e2:hover{background:#ffffff !important;color:#1C2A22 !important}
.e3:hover{background:#F7F5EF !important}
.e4:hover{animation-play-state:paused !important}
.e5:hover{color:#9FAE84 !important}
.e6:hover{color:#F7F5EF !important}
.e7:focus{border-color:#26382E !important;box-shadow:0 0 0 3px rgba(38,56,46,.1) !important}
.e8:hover{background:#1C2A22 !important}
.e9:hover{color:#586540 !important}
.e10:hover{background:rgba(247,245,239,.12) !important;color:#F7F5EF !important}
/* ------------------------------------------------------------- acordeon */
[data-faq]{color:#26382E}
[data-faq][aria-expanded="true"] .faq-ico-cerrado{display:none}
[data-faq][aria-expanded="false"] .faq-ico-abierto{display:none}

/* ------------------------------------------------------------ formulario */
/* Campo trampa: fuera de la vista pero accesible al bot que rellena todo. */
.trampa{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.form-error{
  grid-column:1/-1;margin:0;padding:12px 14px;border-radius:2px;
  background:#F3E3DD;border:1px solid #C9805F;color:#7A3B1D;
  font:500 16px/1.5 'Raleway',system-ui;
}

/* Un campo invalido se marca solo despues de intentar enviar, no mientras
 * el visitante todavia lo esta escribiendo. */
.form-enviado input:invalid,.form-enviado select:invalid,.form-enviado textarea:invalid{border-color:#C9805F}

button[disabled]{opacity:.6;cursor:progress}

/* --------------------------------------------------------- aviso cookies */
#aviso-cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;
  padding:16px clamp(16px,4vw,40px);
  background:rgba(28,42,34,.97);backdrop-filter:blur(10px);
  border-top:1px solid rgba(247,245,239,.16);
}
#aviso-cookies p{
  flex:1 1 320px;margin:0;
  font:400 16px/1.55 'Raleway',system-ui;color:#D3D6C9;
}
#aviso-cookies div{display:flex;gap:10px;flex-wrap:wrap}
#aviso-cookies button{
  min-height:44px;padding:0 20px;border-radius:2px;cursor:pointer;
  font:600 16px/1 'Raleway',system-ui;transition:background .2s,color .2s;
}
#aviso-cookies [data-cookies="no"]{background:none;border:1px solid rgba(247,245,239,.45);color:#F7F5EF}
#aviso-cookies [data-cookies="no"]:hover{background:rgba(247,245,239,.12)}
#aviso-cookies [data-cookies="si"]{background:#F7F5EF;border:none;color:#26382E}
#aviso-cookies [data-cookies="si"]:hover{background:#fff}

/* Con el aviso abierto, la barra pegajosa del diseno se aparta para no
 * quedar una encima de la otra. */
body.con-aviso [data-flm-barra]{bottom:86px}

/* ------------------------------------------------------- los espacios (movil)
 * Los cuatro espacios se alternan foto-texto / texto-foto para hacer zigzag en
 * pantalla ancha. Al apilarse en movil ese orden dejaba dos fotos seguidas y
 * dos textos seguidos, con el titulo separado de su foto. Apilados van todos
 * igual: primero la foto, debajo su texto.
 *
 * El corte esta medido: a 700 px van lado a lado y a 660 px ya se apilan. */
@media (max-width: 680px){
  /* !important porque el contenedor lleva align-items:center en su atributo
     style, y un atributo style gana a la hoja de estilos. Sin esto, al pasar a
     columna la caja de la foto se encogia a su contenido: como las fotos van
     posicionadas en absoluto, median cero y desaparecian. */
  [data-espacio]{flex-direction:column !important;align-items:stretch !important}

  /* En columna, flex-basis manda sobre la altura, no sobre el ancho: con los
     320px del diseno la foto crecia de 260 a 320 px de alto. Con auto vuelve a
     mandar la altura que puso el diseno. */
  [data-espacio] > [data-espacio-foto]{order:1;flex-basis:auto !important;width:100% !important}
  [data-espacio] > [data-espacio-texto]{order:2;flex-basis:auto !important;width:100% !important}
}

/* --------------------------------------------- titulos de tarjeta (movil)
 * En el telefono, los titulos de las tarjetas de Formatos y Servicios quedaban
 * demasiado livianos a 18,4 px. Suben a 20 px.
 *
 * El peso se queda en 400: DM Serif Display (tipografia de marca desde el
 * 21-09-2026) solo existe en ese peso y ya es rotunda. Con Newsreader esta
 * regla subia a 500; con DM Serif ese 500 no tiene efecto, y una negrita
 * falsificada por el navegador en una serif se ve sucia.
 *
 * !important porque compite con el atributo style del propio titulo. */
@media (max-width: 680px){
  article h3{font-weight:400 !important;font-size:1.35rem !important}
}

/* ------------------------------------------------- barra fija de conversion
 * Arranca oculta y aparece al pasar el hero. En el movil tapaba justo el boton
 * del hero, que es la llamada principal de la primera pantalla.
 *
 * Se oculta desplazandola, no con display, para poder animar la aparicion; y
 * con pointer-events:none para que mientras no se ve no se pueda pulsar. */
[data-flm-barra]{
  transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .3s ease;
  will-change:transform;
}
body:not(.barra-visible) [data-flm-barra]{
  transform:translate3d(0,115%,0);
  opacity:0;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  [data-flm-barra]{transition:none}
}