/*
Theme Name:   María Alarcón - Centro visual
Theme URI:    https://www.opticamariaalarcon.com
Description:  Child theme para María Alarcón - Centro visual realizado por Anti.
Author:       Anti
Author URI:   https://antiestudi.com
Template:     generatepress
Version:      0.1
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
*/
/*
─── ÍNDICE ─────────────────────────────────────────────────────────────
1. VARIABLES GENERALES Y TIPOGRAFÍAS
2. TÍTULOS
3. TEXTOS
4. BOTONES
5. HEADER
6. FOOTER
7. DISTANCIAS
8. SECCIONES
9. RESPONSIVE
*/
/*─────────────────────────────────────────────────────────────────────────────
1. VARIABLES GENERALES Y TIPOGRAFÍAS
─────────────────────────────────────────────────────────────────────────────*/
@font-face  {
    font-family: 'Be Vietnam Pro';
    src: url('fonts/BeVietnamPro-BoldItalic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}
@font-face  {
    font-family: 'Be Vietnam Pro';
    src: url('fonts/BeVietnamPro-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face  {
    font-family: 'Be Vietnam Pro';
    src: url('fonts/BeVietnamPro-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face  {
    font-family: 'Be Vietnam Pro';
    src: url('fonts/BeVietnamPro-ExtraBold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face  {
    font-family: 'Be Vietnam Pro';
    src: url('fonts/BeVietnamPro-BlackItalic.woff2') format('woff2');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}
@font-face  {
    font-family: 'Be Vietnam Pro';
    src: url('fonts/BeVietnamPro-ExtraBoldItalic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}
@font-face  {
    font-family: 'Be Vietnam Pro';
    src: url('fonts/BeVietnamPro-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face  {
    font-family: 'Be Vietnam Pro';
    src: url('fonts/BeVietnamPro-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face  {
    font-family: 'Be Vietnam Pro';
    src: url('fonts/BeVietnamPro-ExtraLightItalic.woff2') format('woff2');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}
@font-face  {
    font-family: 'Be Vietnam Pro';
    src: url('fonts/BeVietnamPro-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face  {
    font-family: 'Be Vietnam Pro';
    src: url('fonts/BeVietnamPro-ThinItalic.woff2') format('woff2');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}
@font-face  {
    font-family: 'Be Vietnam Pro';
    src: url('fonts/BeVietnamPro-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face  {
    font-family: 'Be Vietnam Pro';
    src: url('fonts/BeVietnamPro-LightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face  {
    font-family: 'Be Vietnam Pro';
    src: url('fonts/BeVietnamPro-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face  {
    font-family: 'Be Vietnam Pro';
    src: url('fonts/BeVietnamPro-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face  {
    font-family: 'Be Vietnam Pro';
    src: url('fonts/BeVietnamPro-MediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face  {
    font-family: 'Be Vietnam Pro';
    src: url('fonts/BeVietnamPro-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face  {
    font-family: 'Be Vietnam Pro';
    src: url('fonts/BeVietnamPro-SemiBoldItalic.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
@font-face  {
    font-family: 'Karla';
    src: url('fonts/Karla-Regular.ttf') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


:root {
    --fuente: 'Be Vietnam Pro', sans-serif;
    --fuente-dos: 'Karla', sans-serif;
    --color-negro: #000000;
    --color-blanco: #FFFFFF;
    --color-rosa: #CB858D;
    --color-rosa-medio: #DFB6BA;
    --color-rosa-claro: #FFF9F9;
    --spy-offset: 180px;
}
body {
    font-family: var(--fuente) !important;
}
/*─────────────────────────────────────────────────────────────────────────────
2. TÍTULOS
─────────────────────────────────────────────────────────────────────────────*/
h1 {
    font-family: var(--fuente) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    color: var(--color-negro) !important;
}
.titulos h2  {
    font-family: var(--fuente) !important;
    font-size: 30px !important;
    font-weight: 400 !important;
    line-height: 38px !important;
    color: var(--color-negro) !important;
}
.subtitulos p  {
    font-family: var(--fuente) !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    color: var(--color-negro) !important;
}
.titulos-blanco h2  {
    font-family: var(--fuente) !important;
    font-size: 30px !important;
    font-weight: 400 !important;
    line-height: 38px !important;
    color: var(--color-blanco) !important;
}
.subtitulos-blanco p  {
    font-family: var(--fuente) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--color-blanco) !important;
}
.servicios h3 {
    font-family: var(--fuente) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    color: var(--color-negro) !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}
/*─────────────────────────────────────────────────────────────────────────────
3. TEXTOS
─────────────────────────────────────────────────────────────────────────────*/
.servicios p {
    font-family: var(--fuente) !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    color: var(--color-negro) !important;
    border: none !important;
    padding: 20px 10px!important;
    margin: 0 !important;
    line-height: 23px !important;
}
.nombre-equipo p {
    display: flex !important;
    font-family: var(--fuente) !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    color: var(--color-negro) !important;
    border: none !important;
    margin: 0 !important;
}
.descripcion-equipo p {
    font-family: var(--fuente) !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    color: var(--color-negro) !important;
    border: none !important;
    margin: 0 !important;
    line-height: 23px !important;
}
.descripcion-equipo a:hover {
    font-family: var(--fuente) !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    color: var(--color-rosa) !important;
    border: none !important;
    margin: 0 !important;
    line-height: 23px !important;
}
.texto-blanco p {
    font-family: var(--fuente) !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    color: var(--color-blanco) !important;
    border: none !important;
    margin: 0 !important;
    line-height: 23px !important;
}
/*─────────────────────────────────────────────────────────────────────────────
4. BOTONES
─────────────────────────────────────────────────────────────────────────────*/
/* BOTON NORMAL */
.boton-blanco .elementor-button{
    border: 1px solid var(--color-blanco) !important;
    border-radius: 2px !important;
    background-color: var(--color-blanco) !important;    
    font-family: var(--fuente) !important;
    color: var(--color-rosa) !important;
    cursor: pointer !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
}
.boton-blanco .elementor-button:hover{
    background-color: var(--color-rosa) !important;    
    color: var(--color-blanco) !important;
    border: 1px solid var(--color-blanco) !important;
}
.boton-negro .elementor-button{
    border: 1px solid var(--color-negro) !important;
    border-radius: 2px !important;
    background-color: var(--color-blanco) !important;    
    font-family: var(--fuente) !important;
    color: var(--color-negro) !important;
    cursor: pointer !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
}
.boton-negro .elementor-button:hover{
    background-color: var(--color-rosa) !important;    
    color: var(--color-blanco) !important;
    border: 1px solid var(--color-blanco) !important;
}
/*BOTON LIQUID*/
.liquidGlass-wrapper {
  position: relative;
  width: 180px;
  height: 40px;
  border: 1px solid #000;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.liquidGlass-effect {
    position:absolute;
    inset:0;
    /* necesario para que el blur funcione */
    background: rgba(255,255,255,.02);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    filter: url(#glass-distortion);
    pointer-events:none;
}

.liquidGlass-content {
    position:relative;
    z-index:1;
    font:var(--fuente);
    color:#000;
    cursor: pointer;
    font-weight: 400;
    font-size: 16px;
}
/* Hover: fondo sólido + texto en blanco */
.liquidGlass-wrapper:hover {
  background-color: #CB858D; /* tu color sólido */
  border-color: #CB858D;
}

.liquidGlass-wrapper:hover .liquidGlass-content {
  color: #fff;
}

/* En hover ocultamos el efecto glass */
.liquidGlass-wrapper:hover .liquidGlass-effect {
  opacity: 0;
}

/* Fallback Safari */
.safari .liquidGlass-effect {
  filter: none !important;
}
/*─────────────────────────────────────────────────────────────────────────────
5. HEADER
─────────────────────────────────────────────────────────────────────────────*/
.elementor-nav-menu--main .elementor-item {
    font-family: var(--fuente-dos) !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: var(--color-negro) !important;
    letter-spacing: 0.7px !important;
}
/* ---------- Vars y wrapper ---------- */
.anti-mini-menu{
  --amm-fg:#000;
  --amm-bg:#FFF9F9;
  --amm-rosa:#FFC6DB; /* rosa del overlay */
  --amm-border:#000;
  --amm-radius:2px;

  position:fixed; z-index:9999;
  inset: 20px 20px auto auto; /* se sobreescribe con data-attrs */
  display:inline-flex; flex-direction:column; align-items:flex-end; gap:10px;
  opacity:0; transform: translateY(-10px) scale(.98); pointer-events:none;
  transition: opacity .35s ease, transform .35s ease;
}
.anti-mini-menu.amm-visible{ opacity:1; transform:none; pointer-events:auto; }

/* ---------- Botón hamburguesa (2 líneas) ---------- */
.anti-mini-menu .amm-hamb{
  width:45px; height:42px;
  border:1px solid var(--amm-border);
  background: var(--amm-bg);
  border-radius: var(--amm-radius);
  display:grid; place-items:center;
  cursor:pointer; padding:6px 3px;
  transition: box-shadow .25s ease, transform .12s ease, background .2s ease, border-color .2s ease;
  position:relative; overflow:hidden;
}
.anti-mini-menu .amm-hamb:active{ transform:translateY(1px); }
.anti-mini-menu .amm-hamb:focus-visible{ outline:3px solid rgba(0,0,0,.25); outline-offset:3px; }

.anti-mini-menu .amm-ico{ position:relative; width:22px; height:15px; }
.anti-mini-menu .amm-ico i{
  position:absolute; left:0; right:0; height:1px; background:#000; display:block;
  transition: transform .35s cubic-bezier(.22,1,.36,1), background .2s ease;
}
.anti-mini-menu .amm-ico i:first-child{ top:3px; }
.anti-mini-menu .amm-ico i:last-child{ bottom:3px; }

/* Estado abierto: cruz blanca */
.anti-mini-menu .amm-hamb[aria-expanded="true"]{
  background:transparent; /* fondo oscuro del botón para que la X blanca destaque */
  border-color:transparent;
}
.anti-mini-menu .amm-hamb[aria-expanded="true"] .amm-ico i{ background:#fff; }
.anti-mini-menu .amm-hamb[aria-expanded="true"] .amm-ico i:first-child{ transform: translateY(4px) rotate(45deg); }
.anti-mini-menu .amm-hamb[aria-expanded="true"] .amm-ico i:last-child{ transform: translateY(-4px) rotate(-45deg); }

/* ---------- Overlay (panel) 100vw x 50vh ---------- */
.anti-mini-menu .amm-panel{
  position: fixed;
  left:0; top:0;
  width:100vw; height:55vh;

  background: var(--color-rosa);
  transform: translateY(-6px) scale(.98);
  opacity:0; visibility:hidden; pointer-events:none;
  transform-origin: 50% 0%;
  transition: opacity .28s ease, transform .28s ease, visibility .28s ease;
  display:flex; align-items:end; justify-content:center;
  padding-bottom: 20px;
  gap: 0px;
}
.anti-mini-menu .amm-panel.amm-open{
  opacity:1; visibility:visible; pointer-events:auto; transform:none;
}

/* ---------- Lista y animaciones ---------- */
.anti-mini-menu .amm-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:0px;
  width:min(90vw, 560px);
}
.anti-mini-menu .amm-item{ opacity:0; transform: translateY(8px); }
.anti-mini-menu .amm-panel.amm-open .amm-item{
  animation: amm-fadeUp .4s ease forwards;
  animation-delay: calc(var(--i, 0) * 80ms + 120ms);
}

.anti-mini-menu .amm-item a{
  font-family: var(--fuente-dos);
  letter-spacing: 0.7px;
  font-size: 14px;
  line-height:1.2;
  text-transform: uppercase;
  text-decoration:none; color:#fff;
  padding:10px 0px;
  display:flex; align-items:center; justify-content:space-between;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.anti-mini-menu .amm-item a:hover{ transform: translateY(-1px); }
.anti-mini-menu .amm-item a:active{ transform: translateY(0); }

@keyframes amm-fadeUp{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ---------- Responsive pequeño ---------- */
@media (max-width: 480px){
  .anti-mini-menu .amm-item a{ font-size:18px; }
}
.anti-mini-menu{ isolation:isolate; }              /* nuevo stacking context */
.anti-mini-menu .amm-panel{ z-index:1; }          /* overlay debajo */
.anti-mini-menu .amm-hamb{ position:relative; z-index:2; }  /* X por encima */
/*─────────────────────────────────────────────────────────────────────────────
6. FOOTER
─────────────────────────────────────────────────────────────────────────────*/
.texto-footer p {
    font-family: var(--fuente) !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    color: var(--color-negro) !important;
}
/*─────────────────────────────────────────────────────────────────────────────
7. DISTANCIAS
─────────────────────────────────────────────────────────────────────────────*/
/*─────────────────────────────────────────────────────────────────────────────
8. SECCIONES
─────────────────────────────────────────────────────────────────────────────*/
.fondo-rosa-claro {
    background-color: var(--color-rosa-claro) !important;
}
.fondo-rosa-oscuro {
    background-color: var(--color-rosa) !important;
}
/*SUBRAYADO*/
.highlight-anim {
    position: relative;
    display: inline-block;
    padding: 0 1px;
    /* padding lateral pedido */
    border-radius: 2px;
    /* radios pedidos */
    z-index: 0;
    /* el rectángulo queda detrás del texto */
}
.highlight-anim::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: var(--color-rosa-medio);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    z-index: -1;
}
/* Estado activado por scroll (GSAP) */
.highlight-anim.active::before {
    transform: scaleX(1);
}
/* ===== Acordeón: solo hover y abierto ===== */
.e-n-accordion-item .e-n-accordion-item-title:hover .highlight-anim::before,
.e-n-accordion-item[open] .e-n-accordion-item-title .highlight-anim::before {
    transform: scaleX(1);
}
/*CARRUSEL LOGOS*/
.elementor-widget-image-carousel .swiper .swiper-slide figure  {
    display: flex !important;
}
/*CARRUSEL FOTOS*/
.cv-carousel-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Oculta lo offscreen */
}
.cv-carousel {
    position: relative;
    display: flex;
    gap: 10px;
    /* gap global entre pistas (mínimo) */
    will-change: transform;
}
.cv-track {
    display: flex;
    gap: 10px;
    /* gap entre imágenes */
    align-items: center;
    flex: 0 0 auto;
    /* evita que se encoja */
}
.cv-track img {
    height: 700px !important;
    /* << Alto fijo solicitado */
    width: auto;
    /* Ancho auto para mezclar vertical/horizontal */
    object-fit: cover;
    /* Recorte agradable en horizontales si las restringes */
    /* opcional */
    display: block;
}
/*─────────────────────────────────────────────────────────────────────────────
9. RESPONSIVE
─────────────────────────────────────────────────────────────────────────────*/

@media (max-width: 767px) {
    h1 {
        font-size: 19px !important;
        line-height: 24px !important;
    }
    .titulos h2  {
        font-size: 29px !important;
        line-height: 36px !important;
    }
    .servicios h3 {
        font-size: 18px !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        line-height: 25px !important;
    }
    .servicios p {
        font-family: var(--fuente) !important;
        font-size: 17px !important;
        font-weight: 400 !important;
        color: var(--color-negro) !important;
        border: none !important;
        padding: 20px 10px!important;
        margin: 0 !important;
        line-height: 24px !important;
    }
    .cv-track img {
        height: 500px !important;
    }
    .elementor-widget-image-carousel .swiper .swiper-slide figure  {
        justify-content: center !important;
    }
    .fondo-rosa-footer-movil{
        background-color: var(--color-rosa) !important;
    }
    .fondo-rosa-footer-movil p{
        color: var(--color-blanco) !important;
    }
}

@media (min-width: 1441px) {
    h1 {
        font-size: 20px !important;
    }
    .titulos h2 {
        font-size: 37px !important;
        line-height: 46px !important;
    }
    .titulos-blanco h2 {
        font-size: 37px !important;
        line-height: 46px !important;
    }      
    .servicios h3 {
        font-size: 20px !important;
    }
    .cv-track img {
        height: 800px !important;
    }
}

@media (min-width: 2400px) {
    .elementor-nav-menu--main .elementor-item {

        font-size: 16px !important;
        letter-spacing: 0.7px !important;
    }
    h1 {
        font-size: 21px !important;
    }
    .titulos h2 {
        font-size: 41px !important;
        line-height: 49px !important;
    }
    .titulos-blanco h2 {
        font-size: 41px !important;
        line-height: 49px !important;
    }      
    .servicios h3 {
        font-size: 21px !important;
        padding: 21px 10px!important;
    }
    .cv-track img {
        height: 1100px !important;
    }
    .subtitulos p  {
        font-size: 19px !important;
    }
    .servicios p {
        font-size: 19px !important;
    }
    .nombre-equipo p {
        font-size: 19px !important;
    }
    .descripcion-equipo p {
        font-size: 19px !important;
    }
    .descripcion-equipo a:hover {
        font-size: 19px !important;
    }
    .texto-blanco p {
        font-size: 19px !important;
    }
}

.featured-image {
    display: none !important;
}