/* =====================================================================
   LANDING «PREVENTA SCALP» — CMS 117 (advancedcms)
   Reproduce el frame de Figma «PREVENTA PRIVADA 14-22 SEPT» (1512 x 726).
   ---------------------------------------------------------------------
   Estructura sobre la que actua (no la modifica):

   #advanced_cms_wrapper_117.advanced-cms-wrapper.t17
     |- .row                        (vacia)
     |- .fullwidth
          |- .row
               |- .row
                    |- div.col-lg-6...  IZQUIERDA: .rte > h1 + p + p>img
                    |- div.col-lg-6...  DERECHA:   .rte > p + h2 + p
                                                   + #scalp-form + p>span

   El bloque #scalp-form llega maquetado aparte: aqui solo se reserva su
   separacion vertical.

   Equivalencias con las capas de Figma:
     MQ _ SCALP SHOTS 1  -> .rte > p:last-of-type > img
     Rectangle 722       -> el corte diagonal, via clip-path
     Group 2661 / h1     -> .rte > h1
   ---------------------------------------------------------------------
   2026-09-14 (cliente): la imagen de la izquierda lleva ya el texto
   incrustado. Se quita el desenfoque, el corte diagonal, la rotacion y el
   recorte (object-fit: cover): la imagen se muestra entera a todo el ancho
   de su columna y define la altura de la seccion. La seccion 4 de este
   fichero es la que cambia; el resto se conserva.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Fuente oblicua de Avant Garde
   El tema declara avgardd.TTF (Demi, weight 700) y avgardn.TTF (Book,
   weight 500), pero deja comentada la oblicua. El <i> de «biotech» la
   necesita, asi que se declara con nombre propio para no alterar la
   familia "AvantGarde Bk BT" del resto del sitio.
   --------------------------------------------------------------------- */
@font-face {
    font-family: "AvantGarde Demi Oblique";
    src: url("/themes/miriamquevedo/assets/css/fonts/AvantGarde/avgarddo.TTF") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ---------------------------------------------------------------------
   2. Variables
   Todo escala con el ancho de ventana manteniendo la proporcion del
   frame: 1512 px de ancho, 726 de alto, h1 de 80 px, h2 de 40 px.
   --------------------------------------------------------------------- */
#advanced_cms_wrapper_117 {
    /* Alto de la seccion: 726 / 1512 = 48vw */
    --mq-hero-h: clamp(560px, 48vw, 860px);

    /* Tipografias: 80/1512 = 5.291vw, 40/1512 = 2.646vw */
    --mq-h1: clamp(40px, 5.291vw, 96px);
    --mq-h2: clamp(26px, 2.646vw, 48px);
    --mq-body: 17px;
    --mq-legal: 15px;

    /* Colores exactos del export de Figma */
    --mq-ink: #000000;
    --mq-ink-soft: #7b7b7b;
    --mq-on-image: #ffffff;

    /* Foto: desenfoque de Figma (7.5px sobre 1512 = 0.5vw) */
    --mq-blur: 0.5vw;

    /* Corte diagonal (Rectangle 722, rotado -1.24deg).
       Borde visible de la foto: x=704.7 arriba y x=720.4 abajo, sobre una
       columna de 756 px. */
    --mq-cut-top: 93.22%;
    --mq-cut-bottom: 95.30%;

    padding: 0;
    background: #ffffff;
}


/* ---------------------------------------------------------------------
   3. Rejilla: seccion a sangre, columnas al 50% y sin gutters
   --------------------------------------------------------------------- */
#advanced_cms_wrapper_117 > .row:first-child {
    margin: 0;
}

#advanced_cms_wrapper_117 .fullwidth > .row,
#advanced_cms_wrapper_117 .fullwidth > .row > .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    margin: 0;
}

#advanced_cms_wrapper_117 .fullwidth > .row > .row {
    align-items: stretch;
    min-height: 0;   /* antes var(--mq-hero-h): ahora la altura la da la imagen entera */
}

#advanced_cms_wrapper_117 .fullwidth > .row > .row > div {
    padding: 0;
}

#advanced_cms_wrapper_117 .fullwidth > .row > .row > div:first-child {
    display: flex;
}

#advanced_cms_wrapper_117 .fullwidth > .row > .row > div:last-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 30px 32px 0;
    background: #ffffff;
}


/* ---------------------------------------------------------------------
   3b. Seccion a sangre sin desfase (2026-09-14)
   El tema ensancha .fullwidth con width: 100vw y margin-left: calc(50% - 50vw);
   100vw incluye la barra de scroll, asi que la seccion sobresalia 6 px por
   cada lado y la imagen perdia ese borde. Se hace lo mismo que el modo
   fullwidth del modulo: el contenedor del tema pasa a ancho completo y
   .fullwidth deja de usar vw. La miga de pan conserva su ancho de 1440 px.
   --------------------------------------------------------------------- */
#module-advancedcms-adcms #wrapper > .container {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

#module-advancedcms-adcms #wrapper > .container > .row {
    margin-left: 0;
    margin-right: 0;
}

#module-advancedcms-adcms #content-wrapper {
    padding-left: 0;
    padding-right: 0;
}

#module-advancedcms-adcms #wrapper > .container > .breadcrumb {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
}

#advanced_cms_wrapper_117 .fullwidth {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}


/* ---------------------------------------------------------------------
   4. Columna izquierda: la imagen entera, sin desenfoque ni corte
   (cliente 2026-09-14: el texto va dentro de la propia imagen)
   --------------------------------------------------------------------- */
#advanced_cms_wrapper_117 .fullwidth > .row > .row > div:first-child > .rte {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;    /* si la columna derecha es mas alta, la imagen queda centrada */
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow: visible;
    text-align: center;
}

/* El parrafo vacio que dejo el editor (antes subtitulo sobre la foto) no ocupa sitio */
#advanced_cms_wrapper_117 .fullwidth > .row > .row > div:first-child .rte > p:empty {
    display: none;
    margin: 0;
}

/* El parrafo de la imagen vuelve al flujo normal: sin blur ni clip-path */
#advanced_cms_wrapper_117 .fullwidth > .row > .row > div:first-child .rte > p:last-of-type {
    position: static;
    inset: auto;
    z-index: auto;
    width: 100%;
    margin: 0;
    min-height: 0;
    filter: none;
    clip-path: none;
    line-height: 0;             /* sin hueco bajo la imagen */
}

/* La imagen se ve completa: todo el ancho de la columna, alto proporcional, sin recorte ni rotacion */
#advanced_cms_wrapper_117 .fullwidth > .row > .row > div:first-child .rte > p:last-of-type img {
    position: static;
    display: block;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: initial;
    object-position: initial;
    transform: none;
}

/* Titular principal: caja de 704px alineada al borde izquierdo,
   texto centrado dentro. */
#advanced_cms_wrapper_117 .fullwidth > .row > .row > div:first-child .rte > h1 {
    position: relative;
    z-index: 2;
    width: 93.12%;
    max-width: 8.7em;           /* fuerza el corte tras «biotech» */
    margin: 0 auto 0 0;
    color: var(--mq-on-image);
    font-family: "AvantGarde Bk BT", "Century Gothic", Arial, sans-serif;
    font-weight: 700;
    font-size: var(--mq-h1);
    line-height: 0.66;
    letter-spacing: -0.02em;
    text-align: center;
    text-transform: none;
}

#advanced_cms_wrapper_117 .fullwidth > .row > .row > div:first-child .rte > h1 i {
    font-family: "AvantGarde Demi Oblique", "AvantGarde Bk BT", "Century Gothic", Arial, sans-serif;
    font-style: normal;
    font-weight: 700;
}

/* Titular secundario sobre la foto */
#advanced_cms_wrapper_117 .fullwidth > .row > .row > div:first-child .rte > p:first-of-type {
    position: relative;
    z-index: 2;
    width: 93.12%;
    margin: calc(var(--mq-h1) * 0.405) auto 0 0;
    color: var(--mq-on-image);
    font-family: "Fira Sans", Arial, sans-serif;
    font-weight: 500;
    font-size: var(--mq-body);
    line-height: 1.65;
    font-variant: small-caps;
    text-align: center;
}


/* ---------------------------------------------------------------------
   5. Columna derecha
   El contenido arranca justo en la mitad del frame (x=756) y mide 726px,
   con 30px de aire hasta el borde derecho. Va centrado en vertical.
   --------------------------------------------------------------------- */
#advanced_cms_wrapper_117 .fullwidth > .row > .row > div:last-child > .rte {
    width: 100%;
    max-width: 726px;
}

/* Antetitulo «SUBSCRIBE AND DISCOVER» */
#advanced_cms_wrapper_117 .fullwidth > .row > .row > div:last-child .rte > p:nth-of-type(1) {
    margin: 0;
    color: var(--mq-ink);
    font-family: "Fira Sans", Arial, sans-serif;
    font-weight: 400;
    font-size: var(--mq-body);
    line-height: 1.65;
    letter-spacing: 0;
    font-variant: small-caps;
}

/* Titular principal de la columna derecha */
#advanced_cms_wrapper_117 .fullwidth > .row > .row > div:last-child .rte > h2 {
    max-width: 10.4em;          /* fuerza el corte tras «pre-sale» */
    margin: 10px 0 0;
    color: var(--mq-ink);
    font-family: "AvantGarde Bk BT", "Century Gothic", Arial, sans-serif;
    font-weight: 700;
    font-size: var(--mq-h2);
    line-height: 0.925;         /* 37px sobre 40px */
    letter-spacing: 0;
    text-transform: none;
}

/* Subtitulo sobre el formulario */
#advanced_cms_wrapper_117 .fullwidth > .row > .row > div:last-child .rte > p:nth-of-type(2) {
    margin: 32px 0 0;
    color: var(--mq-ink);
    font-family: "Fira Sans", Arial, sans-serif;
    font-weight: 400;
    font-size: var(--mq-body);
    line-height: 1.65;
    letter-spacing: 0;
    text-transform: uppercase;
}

/* Hueco del formulario (llega maquetado aparte) */
#advanced_cms_wrapper_117 #scalp-form {
    margin-top: 29px;
}

/* Texto legal bajo el formulario */
#advanced_cms_wrapper_117 .fullwidth > .row > .row > div:last-child .rte > p:nth-of-type(3),
#advanced_cms_wrapper_117 .fullwidth > .row > .row > div:last-child .rte > p:nth-of-type(3) span {
    color: var(--mq-ink-soft);
    font-family: "Fira Sans", Arial, sans-serif;
    font-weight: 400;
    font-size: var(--mq-legal);
    line-height: 1.65;
}

#advanced_cms_wrapper_117 .fullwidth > .row > .row > div:last-child .rte > p:nth-of-type(3) {
    margin: 27px 0 0;
}


/* ---------------------------------------------------------------------
   6. Tablet y movil
   Por debajo de 768px las columnas se apilan y la diagonal desaparece:
   la foto pasa a ocupar todo el ancho y el bloque blanco va debajo.
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
    #advanced_cms_wrapper_117 .fullwidth > .row > .row > div:last-child {
        padding-right: 24px;
        padding-left: 20px;
    }
}

@media (max-width: 767px) {
    #advanced_cms_wrapper_117 {
        --mq-hero-h: 0px;   /* la imagen entera marca la altura tambien en movil */
        --mq-blur: 0px;
    }

    #advanced_cms_wrapper_117 .fullwidth > .row > .row {
        min-height: 0;
    }

    #advanced_cms_wrapper_117 .fullwidth > .row > .row > div:first-child,
    #advanced_cms_wrapper_117 .fullwidth > .row > .row > div:last-child {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    #advanced_cms_wrapper_117 .fullwidth > .row > .row > div:first-child .rte > p:last-of-type {
        clip-path: none;
    }

    #advanced_cms_wrapper_117 .fullwidth > .row > .row > div:first-child .rte > h1,
    #advanced_cms_wrapper_117 .fullwidth > .row > .row > div:first-child .rte > p:first-of-type {
        width: 88%;
        margin-right: auto;
        margin-left: auto;
    }

    #advanced_cms_wrapper_117 .fullwidth > .row > .row > div:last-child {
        padding: 40px 24px 48px;
    }
}