/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* ==== Home ==== */

.mundo {
    transform: rotate(-15deg);
}

/* Contenedor a todo el ancho del navegador (sin importar el max-width/padding que le imponen
   el tema .ast-container o Elementor .e-con-boxed). OJO: ya NO se recorta con clip-path aquí,
   porque clip-path en el contenedor recorta TODO lo de adentro (incluida la imagen de naranjas,
   que debe sobresalir por debajo de la curva) sin importar el z-index que tenga. En vez de eso,
   la curva se simula con .contenedor-curva::after: una capa blanca con la forma inversa (solo la
   franja que antes se recortaba), puesta por DEBAJO de la imagen en el z-index, para que la
   imagen quede pintada encima y sí sobresalga visualmente sobre la curva. */
.contenedor-curva {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.contenedor-curva::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    clip-path: url(#contenedor-curva-forma-1-inversa);
    z-index: 1;
    pointer-events: none;
}

/* Mismo tratamiento que .contenedor-curva (ancho completo + recorte en el borde inferior),
   pero con la silueta de forma-1 espejada en horizontal (clipPath fondo-comercializa-forma-1,
   definido en functions.php). */
.fondo-comercializa {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    clip-path: url(#fondo-comercializa-forma-1);
}

/* Mismo tratamiento que .contenedor-curva (ancho completo), pero con la silueta de forma-1
   espejada en vertical (clipPath donde-llegamos-forma-1, definido en functions.php): la onda
   queda en el borde SUPERIOR del contenedor en vez de en el inferior, y el borde INFERIOR
   es una única curva cóncava (no una onda) en vez de una línea recta. */
.donde-llegamos {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    clip-path: url(#donde-llegamos-forma-1);
}

/* En tablet/móvil estos contenedores quedan mucho más angostos (y a menudo más altos, porque el
   contenido se apila), así que la misma onda -que es un % fijo de la altura del contenedor- se ve
   mucho más empinada ("parecen montañas"). Se usa una variante de cada clipPath con menos
   amplitud (-30% en tablet, -50% en móvil; ver functions.php) manteniendo fijos los bordes reales
   de la caja. */
@media (max-width: 1024px) and (min-width: 768px) {
    .contenedor-curva::after {
        clip-path: url(#contenedor-curva-forma-1-inversa-tablet);
    }

    .fondo-comercializa {
        clip-path: url(#fondo-comercializa-forma-1-tablet);
    }

    .donde-llegamos {
        clip-path: url(#donde-llegamos-forma-1-tablet);
    }
}

@media (max-width: 767px) {
    .contenedor-curva::after {
        clip-path: url(#contenedor-curva-forma-1-inversa-mobile);
    }

    .fondo-comercializa {
        clip-path: url(#fondo-comercializa-forma-1-mobile);
    }

    .donde-llegamos {
        clip-path: url(#donde-llegamos-forma-1-mobile);
    }
}

/* ==== Contenedor con fondo fijo (imagen A) + imagen superpuesta (imagen B) ====
   Nuevo contenedor que reutiliza .contenedor-curva (ancho completo + curva, ya resuelto) y
   agrega dos cosas propias con la clase .fondo-fijo:
   1) Un alto fijo (~600px) para que exista "recorrido" de scroll dentro del contenedor.
   2) background-attachment:fixed en el fondo que se sube por el panel Background de Elementor,
      para que esa imagen no se desplace mientras el usuario hace scroll a través de la sección.
   Solo en desktop/laptop (background-attachment:fixed es poco fiable en móvil y no se pidió ahí). */
@media (min-width: 1025px) {
    .fondo-fijo {
        height: 600px;
        background-attachment: fixed;
    }
}

/* Imagen suelta que va POR ENCIMA de la curva (como la de naranjas en el hero): position:absolute
   propio (no el toggle de Elementor) + z-index por encima de .contenedor-curva::after (que usa
   z-index:1), para que no quede tapada por la capa que simula la curva. Ajusta el top/right según
   el diseño real. El tamaño se controla en ".imagen-superpuesta img", no aquí: la clase que se le
   pone al widget en Elementor cae en el <div> envoltorio, no en el <img> de adentro, así que un
   height en .imagen-superpuesta no cambia el tamaño visible de la imagen. */
.imagen-superpuesta {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 5%;
    pointer-events: none;
}

.imagen-superpuesta img {
    display: block;
    width: auto;
    height: 600px;
}

/* ==== Misión / Visión ====
   Elementor dibuja el marco punteado + el ícono como una sola imagen SVG de proporción fija
   (marco_mision.svg / marco_vision.svg) con background-size:contain. Eso hace que la imagen se
   reescale de forma no uniforme según el alto/ancho real de cada tarjeta (que cambia mucho entre
   desktop, tablet y móvil), mientras el padding que separa el texto del ícono queda fijo en
   píxeles: por eso una tarjeta se ve más "encogida" que la otra en tablet, y en móvil el ícono
   termina montado sobre el título. Solución: se desactiva esa imagen y se recrean el marco (borde
   CSS, siempre exacto al tamaño real de la tarjeta) y el ícono (SVG aparte, tamaño fijo) por
   separado, para que ninguno de los dos dependa del escalado del otro. */
.container-mision,
.container-vision {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 340px;
}

/* El marco original NO es un rectángulo completo: el borde arranca más adentro por la
   izquierda a propósito, para dejar un hueco donde el ícono sobresale sin línea detrás.
   Reutilizamos el ::before de Elementor (donde pintaba la imagen del marco) como esa caja
   de borde, recortada por la izquierda en vez de cubrir todo el ancho del contenedor. */
.container-mision::before,
.container-vision::before {
    content: "" !important;
    background-image: none !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 30px !important;
    border: 3px dashed #009841;
    border-left: none;
    border-radius: 0 20px 20px 0;
    pointer-events: none;
}

.container-vision::before {
    border-color: #F08027;
}

.naranjas {
    width: auto;
    height: 1650px !important;
}

/* A partir de 768px el borde derecho del marco se pierde: el contenedor real se extiende más
   allá del área visible en ese rango (un div se desborda), así que el borde -pegado al borde
   derecho real del contenedor- queda fuera de la vista. Lo metemos bastante más adentro para
   que siempre quede dentro del área visible sin importar ese desborde. */
@media (min-width: 768px) {
    .container-mision::before,
    .container-vision::before {
        right: 22% !important;
    }
}

.container-mision::after,
.container-vision::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 18px;
    left: 0;
    width: 62px;
    height: 62px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
}

.container-mision::after {
    background-image: url('assets/img/icono-mision.svg');
}

.container-vision::after {
    background-image: url('assets/img/icono-vision.svg');
}

/* En móvil (<=767px) Elementor deja el padding de estas tarjetas en 0px, por eso el texto
   queda pegado al borde. Le damos un padding propio que no depende de Elementor, y un alto
   mínimo igual para las dos tarjetas para que no varíen de tamaño según el largo del texto. */
@media (max-width: 767px) {
    .container-mision,
    .container-vision {
        padding: 44px 28px !important;
        min-height: 380px;
    }
}

/* ==== Menú "Nuestros Cítricos" del footer (.menu-citric) ====
   Ícono distintivo »» (angle double right) antes de cada item, en vez del bullet por defecto. */
.menu-citric .menu-item {
    position: relative;
}

.menu-citric .menu-item > a.menu-link {
    display: inline-block;
    padding-left: 22px;
}

/* ==== Contenido legal (texto largo con wp_editor, ej. Política de Privacidad) ====
   Los títulos de sección (<h5>) quedaban pegados al párrafo anterior: un Enter de más en el
   editor visual de WordPress no alcanza, porque TinyMCE descarta los <p> vacíos al guardar (no
   queda rastro de ese salto de línea en el HTML final). La separación real hay que hacerla acá,
   con margen antes de cada <h5> que viene después de un párrafo. */
p + h5 {
    margin-top: 34px !important;
}

/* ==== Menú "Nuestros Cítricos" del footer (.menu-citric) ====
   Ícono distintivo »» (angle double right) antes de cada item, en vez del bullet por defecto. */
.menu-citric .menu-item {
    position: relative;
}

.menu-citric .menu-item > a.menu-link {
    display: inline-block;
    padding-left: 22px;
}

.menu-citric .menu-item::before {
    content: "\00BB";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #125687;
}