/* 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} /* ------------------------------------------------------- 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} } /* ------------------------------------------------------ formulario de OKweb * OKweb inyecta su propia hoja con !important. Estas reglas le ganan por * especificidad (llevan delante [data-okweb-form]). * * OKweb no crea un .okw dentro del contenedor: le pone la clase al propio * contenedor, de ahi el selector compuesto [data-okweb-form].okw (sin espacio). * Con un espacio no coincidia nada y ninguna de estas reglas se aplicaba. * * El color de fondo del panel lo escribe en linea pero sin !important, asi que * se anula aqui: el formulario se asienta sobre el verde de la seccion. */ [data-okweb-form].okw{background-color:transparent !important;padding:0 !important;max-width:100% !important;font-size:17px} [data-okweb-form].okw .okw-etiqueta{font-size:.9em} /* Campos un punto mas grandes que los de serie. */ [data-okweb-form].okw .okw-entrada, [data-okweb-form].okw .okw-area, [data-okweb-form].okw .okw-select{padding:14px 16px !important;font-size:1em !important} /* Safari ignora el relleno de un