/* PLATONIA STUDIO — puente Elementor → studio.css
   Regla: Elementor da estructura y edición; el estilo viene de canon.css + studio.css + este fichero.
   No estilar por widget. Las clases st-* se ponen en Avanzado → Clases CSS del contenedor o widget.
   studio.css se escribió sobre el HTML plano de la spec (diseno-landing-v3). Aquí se adaptan los selectores
   a la estructura de Elementor (.e-con, .elementor-widget-container…). Ampliar aquí, no en widgets.
   Convención: los contenedores de Elementor leen sus medidas de variables (--padding-*, --gap, --display),
   así que aquí se ajustan esas variables en vez de repetir padding/gap/display. */

/* ── Contenedores: sin padding ni gap propios; la retícula la manda el tema */
.elementor .e-con{--gap:0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;--margin-left:0px;--margin-right:0px}
.elementor .e-con.wrap{--padding-left:var(--gutter);--padding-right:var(--gutter);--width:100%;max-width:var(--max);margin-left:auto;margin-right:auto}
.elementor .e-con.sec{--padding-top:clamp(72px,10vh,140px);--padding-bottom:clamp(72px,10vh,140px)}
.elementor .e-con.sec.sec--flush{--padding-top:0px;padding-top:0}
.elementor .e-con.st-after-proof{--margin-top:clamp(72px,10vh,140px)}
.elementor .e-con.st-grid{--display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--st-col-gap)}
.elementor .e-con.st-head{--display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--st-col-gap);align-items:end;margin-bottom:clamp(40px,6vw,80px)}
.elementor .e-con.st-head--full{margin-bottom:0}
.elementor .e-con.st-hero{--padding-top:clamp(48px,8vh,112px);--padding-bottom:clamp(48px,7vh,96px);align-items:center;row-gap:48px}
.elementor .e-con.st-ctas{--display:flex;flex-wrap:wrap;align-items:center;--row-gap:18px;--column-gap:28px}
.elementor .e-con.st-who,.elementor .e-con.st-contact{row-gap:40px}
.elementor .e-con.st-start{row-gap:56px}
.elementor .e-con.st-who{align-items:center}

/* Huecos de la retícula: el widget (no el HTML interior) es el hijo de la rejilla */
.st-tray-slot{grid-column:9/-1}
.st-tray-slot .st-tray,.st-tray-slot .st-tray__note{grid-column:auto}
.st-tray-slot{position:relative}
.st-tray-slot .st-tray__note{position:absolute;left:0;right:0;top:100%;margin:12px 0 0}
.elementor .e-con.st-hero{padding-bottom:calc(clamp(48px,7vh,96px) + 31px)}
.st-steps-slot{grid-column:1/-1}
.st-start>.st-faq{grid-column:1/-1}
.st-head--full{grid-column:1/-1}
.st-head>.st-h2{grid-column:1/span 8}
.st-head>.st-muted{grid-column:9/-1;margin:0;max-width:40ch}
.st-head>.st-h2 .elementor-heading-title{max-width:20ch}
.st-contact>.st-form{grid-column:7/-1}
.st-who__txt>.st-facts-slot{margin:0}
.st-who__img .elementor-widget,.st-who__img .elementor-widget-container{height:100%}
.st-who__img .elementor-widget-image img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}

/* HTML de la spec dentro de un widget HTML: los div de Elementor no heredan padding/borde de los selectores de la spec */
.st-proof .elementor-widget,.st-proof .elementor-widget-container{padding:0;border:0}
.st-proof .elementor-widget-container>dl{margin:0}
.st-compare{margin-bottom:17px} /* la spec deja el margen por defecto del dl */

/* ── Titulares y texto (selectores de baja especificidad: la clase de la spec manda) */
:where(.elementor-widget-heading) .elementor-heading-title{font-family:var(--t);font-weight:600;letter-spacing:-.025em;line-height:1;text-wrap:balance;color:inherit}
.elementor-widget-heading .elementor-heading-title em,.elementor-widget-text-editor em{font-family:var(--i);font-style:italic;font-weight:400}
:where(.elementor-widget-text-editor){font-family:var(--s);color:inherit}
.st-h1 .elementor-heading-title{font-size:var(--st-hero-h);line-height:.98;max-width:13ch}
.st-h1 .elementor-heading-title em{font-size:1.04em;letter-spacing:-.01em}
.st-h2 .elementor-heading-title{font-size:var(--st-h2);max-width:20ch}
.st-h3 .elementor-heading-title{font-size:var(--st-h3);letter-spacing:-.015em;line-height:1.1}
.st-lead .elementor-widget-container{font-family:var(--t);font-weight:500;font-size:clamp(20px,1.9vw,28px);line-height:1.2;letter-spacing:-.015em}
.st-muted .elementor-widget-container{color:var(--gris-texto);max-width:48ch}
/* en la spec estos textos llevan el margen en el propio <p> (o ninguno): el <p> interior de Elementor no añade el suyo */
.st-lead .elementor-widget-container>p,.st-hero__p .elementor-widget-container>p,.st-muted .elementor-widget-container>p{margin:0}
.dark .st-muted .elementor-widget-container{color:var(--claro-sobre-negro)}
.st-lab .elementor-heading-title{font-family:var(--s)!important;font-size:12px!important;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-suave);font-weight:500;line-height:1.55;margin:0 0 1em}
.st-head .st-lab .elementor-heading-title{margin-bottom:0}
/* los contenedores de Elementor son flex: los márgenes no se fusionan como en la spec (lab 12 + h2 18 → 18; p 17 + ul 28 → 28) */
.st-who__txt .st-lab .elementor-heading-title,.st-contact__txt .st-lab .elementor-heading-title{margin-bottom:0}
.st-who__txt .st-facts{margin-top:11px}
.dark .st-lab .elementor-heading-title{color:var(--gris-sobre-negro)}
.st-hero h1.elementor-heading-title{margin:0 0 28px}
.st-contact__txt h2.elementor-heading-title{font-size:clamp(40px,5.2vw,80px)}
.st-who__txt .st-h2 .elementor-heading-title{max-width:16ch}
/* Elementor anula el margen inferior de todo widget (.e-con .elementor-widget.elementor-widget, 0,3,0): los márgenes de la spec sobre widgets van más específicos */
.elementor .e-con .st-head .elementor-widget.lab{margin-bottom:18px}
.elementor .st-hero .elementor-widget.st-lead{margin:0 0 18px}
.elementor .st-hero .elementor-widget.st-hero__p{margin-bottom:32px}
/* Elementor impone max-width:100% a los widgets hijos de contenedor: los límites de la spec van en el widget con más especificidad */
.elementor .e-con>.elementor-widget.st-hero__p{max-width:48ch}
.elementor .e-con>.elementor-widget.st-lead{max-width:30ch}

/* Botones y enlaces */
.st-btn .elementor-button{display:inline-flex;align-items:center;gap:10px;font-family:var(--s);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:16px 26px;border:2px solid var(--amarillo);color:var(--negro);background:var(--amarillo);border-radius:0;min-height:48px;line-height:1.55;transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .st-btn .elementor-button:hover{background:transparent;color:inherit;border-color:currentColor}
  .dark .st-btn .elementor-button:hover{color:var(--blanco-roto)}
}
.st-btn .elementor-button{transition:background .2s,color .2s,border-color .2s,transform .16s var(--ease)}
.st-btn .elementor-button:active,.elementor .st-form .elementor-field-type-submit .elementor-button:active{transform:scale(.97)}
.st-btn--sm .elementor-button{padding:11px 18px;min-height:42px;font-size:13px}
.st-link .elementor-button{background:linear-gradient(var(--amarillo),var(--amarillo)) no-repeat 0 100%/100% 3px;border:0;border-radius:0;color:inherit;padding:0 0 3px;min-height:0;font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;line-height:1.55;transition:background-size .25s var(--ease)}
@media (hover:hover) and (pointer:fine){ .st-link .elementor-button:hover{background-size:100% 40%;color:inherit} }

/* Bandeja (shortcode) dentro de un widget */
.st-tray-slot .elementor-shortcode{display:block}
button.btn{line-height:normal}

/* ── Cabecera y pie (Theme Builder) */
.elementor-location-header{position:sticky;top:0;z-index:10;background:rgba(247,245,242,.94);backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--st-linea)}
.elementor .e-con.st-header{background:none;border:0;position:static}
.elementor .e-con.st-header .wrap{--flex-direction:row;flex-direction:row;justify-content:space-between;align-items:center;min-height:72px;height:72px;--column-gap:24px}
.st-logo{line-height:0}
/* v3.1 · el menú es un widget HTML con el marcado de la maqueta (.st-nav › .st-nav__links + .st-menu + .btn); el desplegable de móvil
   sale en studio.css y lo gobierna studio.js. Para que .st-nav__links (absolute, top:100%) ocupe todo el ancho de la cabecera, ni .wrap ni los
   widgets de la cabecera pueden ser el bloque contenedor: lo es .elementor-location-header (sticky). */
.elementor .e-con.st-header .wrap{position:static}
/* La fila de la cabecera no salta de línea (la maqueta no lleva flex-wrap). Con el texto «Cerrar» el botón Menú es 16 px más ancho y Elementor,
   que por defecto envuelve, mandaba «Menú» y «Hablemos» a una segunda fila escondida bajo el desplegable (visto el 10-oct a 390 px). */
.elementor .e-con.st-header .wrap{--flex-wrap:nowrap;flex-wrap:nowrap}
/* Hello Elementor pinta button:hover y button:focus de magenta (#c36) con texto blanco; la maqueta no lleva Hello. Se neutraliza en los botones
   propios del tema (Menú/Cerrar, Cerrar del panel, Anterior/Siguiente) y se conserva el hover de ratón de la maqueta. */
.st-menu:hover,.st-menu:focus,.st-x:focus,.st-drawer__nav button:hover,.st-drawer__nav button:focus{background:none;color:var(--negro)}
@media (hover:hover) and (pointer:fine){ .st-menu:hover,.st-x:hover{background:var(--negro);color:var(--blanco-roto)} }
/* Movimiento reducido: la 2.ª copia de la tira de logos (decorativa) se oculta por su atributo y no por «img+img» (studio.css). El lazy-load de WP Rocket
   mete un <noscript> entre las dos imágenes y el selector de la maqueta dejaba de cumplirse: la tira salía duplicada (visto el 10-oct en la web cacheada). */
@media (prefers-reduced-motion:reduce){ .st-marquee__track img[aria-hidden="true"]{display:none} }
/* V1.2 · galería del panel y visor frente a Hello Elementor (reset.css). Hello da a `button` y `[type=button]` borde de 3 px de radio, `transition:all .3s` y, en :hover y
   :focus, fondo magenta #c36 con texto blanco. La maqueta no lleva Hello: se restablece lo que hace falta y se conserva su hover y los anillos :focus-visible. */
button.btn,.st-x,.st-drawer__nav button,.st-gal__it,.st-lb__b{border-radius:0}   /* «Aprobar todo», «Cerrar», «Anterior/Siguiente», miniaturas y botones del visor */
.st-gal__it:hover,.st-gal__it:focus{background:var(--gris-linea)}
.st-lb__b:focus{background:none;color:var(--blanco-roto)}
.st-lb__b:hover{background:var(--blanco-roto);color:var(--negro)}   /* se reafirma después del :focus: con ratón el botón sigue enfocado */
/* pie del visor en redonda (Hello/Elementor ponen figcaption en cursiva) y sin la transición de Hello en los botones nuevos */
.st-lb__fig figcaption{font-style:normal;margin:0;text-align:left}
.st-lb__n{font-style:normal}
.st-lb__b,.st-gal__it{transition:none}
.st-header .elementor-widget,.st-header .elementor-widget-container{position:static}
.st-main{display:block}
.elementor .e-con.st-footer{background:var(--negro);color:var(--gris-sobre-negro);border-top:1px solid #3a3936;--padding-top:40px;--padding-bottom:40px;font-size:13px}
.elementor .e-con.st-footer .wrap{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;--row-gap:20px;--column-gap:40px}
.st-footer a{color:inherit}
.st-footer__nav .elementor-nav-menu{display:flex;flex-wrap:wrap;column-gap:20px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.st-footer__nav .elementor-nav-menu a{padding:6px 0!important;color:inherit;font-size:12px} /* objetivo táctil ≥ 24 px */
.st-footer__nav .elementor-nav-menu a:hover{color:var(--blanco-roto)}
.st-footer__nav .elementor-menu-toggle{display:none}
.st-footer__copy p{margin:0}

/* ── FAQ (Nested Accordion de Elementor, aspecto de la spec) */
.st-faq{border-top:2px solid var(--negro)}
.st-faq .e-n-accordion-item{border:0;border-bottom:1px solid var(--st-linea);margin:0;background:none}
.st-faq .e-n-accordion-item-title{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;font-family:var(--t);font-weight:600;font-size:clamp(19px,1.6vw,23px);letter-spacing:-.01em;line-height:1.55;color:var(--negro)}
.st-faq .e-n-accordion-item-title::-webkit-details-marker{display:none}
.st-faq .e-n-accordion-item-title-header{margin:0;flex:1}
.st-faq .e-n-accordion-item-title-text{font:inherit;color:inherit}
.st-faq .e-n-accordion-item-title-icon{display:none}
.st-faq .e-n-accordion-item-title::after{content:"";flex:0 0 14px;height:14px;border:solid var(--negro);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-3px,-3px);transition:transform .3s var(--ease)}
.st-faq .e-n-accordion-item[open] .e-n-accordion-item-title::after{transform:rotate(-135deg) translate(-3px,-3px)}
.st-faq .e-n-accordion-item>.e-con{border:0;padding:0}
.st-faq .e-n-accordion-item>.e-con p{margin:0 0 24px;max-width:64ch;color:var(--gris-texto)}
.st-faq .e-n-accordion-item[open]>.e-con{animation:st-fade .32s var(--ease)}
@media (prefers-reduced-motion:reduce){ .st-faq .e-n-accordion-item[open]>.e-con{animation:none} }

/* ── Formulario Elementor Pro (sección contacto, oscura). Colores y huecos son ajustes del widget (build.py); aquí, lo que Elementor no expone. */
.elementor .st-form .elementor-field-group>label{display:block;width:100%;margin-bottom:6px;font-size:13px;font-weight:500;letter-spacing:.04em;line-height:1.55;color:var(--claro-sobre-negro)}
/* V1.2.1 (12-oct): marca «Opcional» del campo de presupuesto; la maqueta cuelga de .st-contact .field label (en Elementor no existe) */
.elementor .st-form .elementor-field-group>label .opt{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--gris-sobre-negro);margin-left:6px;font-weight:400}
.elementor .st-form .elementor-field-textual{font:inherit;font-size:16px;line-height:1.55;padding:16px 18px;min-height:0;box-shadow:none}
.elementor .st-form .elementor-field-textual::placeholder{color:var(--gris-medio)}
.elementor .st-form .elementor-select-wrapper{display:block;background:none}
.elementor .st-form .elementor-select-wrapper::before,.elementor .st-form .select-caret-down-wrapper{display:none}
.elementor .st-form select.elementor-field-textual{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23CFCCC5' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center}
.st-form select option{color:var(--negro)}
.elementor .st-form .elementor-field-type-acceptance .elementor-field-subgroup{display:block}
.elementor .st-form .elementor-field-type-acceptance .elementor-field-option{display:flex;gap:12px;align-items:flex-start;cursor:pointer;padding:4px 0}
.elementor .st-form .elementor-field-type-acceptance input[type=checkbox]{margin:0;width:22px;height:22px;flex:0 0 22px;accent-color:var(--amarillo);padding:0;cursor:pointer}
.elementor .st-form .elementor-field-type-acceptance label{font-size:13px;line-height:1.4;font-weight:400;letter-spacing:0;color:var(--gris-sobre-negro);margin:0;cursor:pointer}
.elementor .st-form .elementor-field-type-acceptance a{text-decoration:underline}
.elementor .st-form .elementor-field-type-submit{width:auto;flex:0 0 auto;margin-top:8px}
.elementor .st-form .elementor-field-type-submit .elementor-button{font-family:var(--s);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:16px 26px;min-height:48px;width:auto;line-height:normal}
.elementor .st-form .elementor-message{margin:0;border:2px solid var(--amarillo);padding:20px;font-size:15px;color:var(--blanco-roto)}
.elementor .st-form .elementor-message.elementor-message-danger{border-color:#ff8a80}
.st-form input,.st-form textarea,.st-form select{font-size:16px} /* evita zoom en iOS */
.st-contact__txt .mail{font-family:var(--t);font-weight:500;font-size:20px;color:var(--blanco-roto);border-bottom:2px solid var(--amarillo)}

/* ── Responsive (los saltos de la spec: 1100, 900, 600) */
@media (max-width:1100px){
  .st-tray-slot{grid-column:1/span 8}
}
@media (max-width:900px){
  .st-head>.st-h2,.st-head>.st-muted{grid-column:1/-1}
  .st-head .st-muted .elementor-widget-container>p{margin-top:20px}
  .st-head .st-lab .elementor-heading-title{margin-top:20px}
  .st-contact>.st-form{grid-column:1/-1}
}
@media (max-width:600px){
  .elementor .e-con.st-header .wrap{height:64px;min-height:64px}
  .st-tray-slot{grid-column:1/-1}
}
@media (max-width:1100px){.st-hero__txt{grid-column:1/-1}}

/* ── Logo con enlace a inicio (cabecera y pie) */
.st-logo a,.st-footer__logo a{display:block;line-height:0;color:inherit;text-decoration:none}
.st-logo a:focus-visible{outline:2px solid var(--negro);outline-offset:4px}
.st-footer__logo a:focus-visible{outline:2px solid var(--amarillo);outline-offset:4px}

/* ── Páginas de texto (legales): plantilla de página de Hello, sin Elementor. Margen arriba y abajo, y más aire entre bloques. */
main.site-main.page{max-width:840px;margin-inline:auto;padding:clamp(56px,8vw,104px) 20px clamp(72px,10vw,128px)}
main.site-main.page .page-header{margin:0 0 clamp(20px,3vw,32px)}
main.site-main.page .page-content>*:first-child{margin-top:0}
main.site-main.page .page-content .upd{margin:0 0 clamp(28px,4vw,44px)}
main.site-main.page .page-content h2{margin:clamp(40px,5vw,56px) 0 14px}
main.site-main.page .page-content h3{margin:32px 0 10px;line-height:1.15}
main.site-main.page .page-content p{margin:0 0 1.35em}
main.site-main.page .page-content :is(ul,ol){margin:0 0 1.35em;padding-left:1.25em}
main.site-main.page .page-content li{margin:0 0 .5em}
main.site-main.page .page-content table{margin:24px 0 36px}
main.site-main.page .page-header .entry-title{padding-inline:0} /* Hello le añade un sangrado en móvil */
@media (max-width:700px){
  main.site-main.page .page-content table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  main.site-main.page .page-content :is(td,th){min-width:150px}
}

/* ── v3.4 · página «Actualizando» (W10, opción B, 9-oct-2026) ─────────────────────────────────────────
   Referencia: web/montaje/actualizando-W10.html. Contenedor .st-hold › [studio_logo solo="caja"] + H1 + párrafo con mailto.
   Una columna de 640 px como máximo, centrada, texto a la izquierda y centrado en vertical. */
.elementor .e-con.st-hold{--flex-direction:column;--justify-content:center;--align-items:flex-start;--gap:28px;--min-height:100vh;--width:100%;--padding-top:0;--padding-bottom:0;--padding-left:24px;--padding-right:24px;flex-direction:column;justify-content:center;align-items:flex-start;gap:28px;min-height:100vh;width:100%;max-width:640px;margin-left:auto;margin-right:auto;padding:0 24px;box-sizing:border-box}
.st-hold .elementor-widget{margin:0}
.st-hold img{height:48px;width:auto;max-width:none}
.st-hold .elementor-heading-title{font:600 clamp(30px,4.4vw,48px)/1.08 var(--t);letter-spacing:-.02em;margin:0;color:var(--negro);text-wrap:wrap}
.st-hold p{font:400 19px/1.5 var(--s);margin:0;max-width:34ch;color:var(--negro)}
.st-hold a{color:inherit;font-weight:500;text-decoration:none;background:linear-gradient(#FFF100,#FFF100) 0 88%/100% .38em no-repeat}
.st-hold a:focus-visible{outline:2px solid var(--negro);outline-offset:3px}

/* V1.2.1 (12-oct): hover de «Enviar mi caso»: botón blanco con texto negro (decisión de Albert tras la prueba del formulario) */
@media (hover:hover) and (pointer:fine){
  /* más específico que el hover por defecto que genera Elementor (.elementor-55 … .elementor-button[type="submit"]:hover{color:#fff}) */
  .elementor .st-form.elementor-widget-form .elementor-field-type-submit .elementor-button[type="submit"]:hover{background:var(--blanco-roto);color:var(--negro);border-color:var(--blanco-roto)}
}