/*
Theme Name: Posidonia
Theme URI: https://posidoniacosmetics.es
Author: Posidonia Cosmetics
Description: Tema a medida para Posidonia Cosmetics. Compatible con Elementor: cabecera, footer y menú en el tema; contenido de páginas en Elementor. Pixel-perfect sobre el diseño de Figma.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: posidonia
*/

/* ===========================================================
   FUENTE SAANS (TRIAL — relicenciar para producción)
   =========================================================== */
@font-face{font-family:'Saans';font-weight:300;font-style:normal;font-display:swap;src:url('assets/fonts/Saans-TRIAL-Light.woff2') format('woff2')}
@font-face{font-family:'Saans';font-weight:400;font-style:normal;font-display:swap;src:url('assets/fonts/Saans-TRIAL-Regular.woff2') format('woff2')}
@font-face{font-family:'Saans';font-weight:500;font-style:normal;font-display:swap;src:url('assets/fonts/Saans-TRIAL-Medium.woff2') format('woff2')}
@font-face{font-family:'Saans';font-weight:600;font-style:normal;font-display:swap;src:url('assets/fonts/Saans-TRIAL-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Saans';font-weight:700;font-style:normal;font-display:swap;src:url('assets/fonts/Saans-TRIAL-Bold.woff2') format('woff2')}
@font-face{font-family:'Saans';font-weight:400;font-style:italic;font-display:swap;src:url('assets/fonts/Saans-TRIAL-RegularItalic.woff2') format('woff2')}
@font-face{font-family:'Saans';font-weight:500;font-style:italic;font-display:swap;src:url('assets/fonts/Saans-TRIAL-MediumItalic.woff2') format('woff2')}
@font-face{font-family:'Saans';font-weight:700;font-style:italic;font-display:swap;src:url('assets/fonts/Saans-TRIAL-BoldItalic.woff2') format('woff2')}

/* ===========================================================
   TOKENS DE MARCA
   =========================================================== */
:root{
  --principal:#0a0e2f;
  --principal-2:#8fa7a3;
  --principal-2-40:#d2dcd9;
  --principal-60:#6b6e82;
  --principal-80:#3b3e59;
  --sec-20:#faf9f8;
  --sec-40:#f4f4f2;
  --acento:#1e1e1e;
  --acento-20:#d2d2d2;
  --acento-40:#a5a5a5;
  --acento-60:#787878;
  --acento-80:#4b4b4b;
  --negro-carbon:#2b2b2b;
  --white:#ffffff;
  --container:1440px;
  --gutter-desktop:60px;
  --gutter-mobile:24px;
  --font:'Saans','Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
}

/* ===========================================================
   BASE
   =========================================================== */
*,*::before,*::after{box-sizing:border-box}
html{font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{margin:0;background:var(--sec-20);color:var(--principal);font-size:16px;line-height:24px;font-weight:400;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .2s ease,background-color .2s ease,opacity .2s ease,transform .2s ease}
button{font-family:inherit}
h1,h2,h3,h4,h5,h6,p{margin:0}
::selection{background:var(--principal-2);color:var(--sec-20)}

/* La fuente y color de marca ganan dentro de Elementor (default fonts/colors desactivados en el kit) */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-button .elementor-button,
.elementor-widget-icon-list .elementor-icon-list-text,
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-description{font-family:var(--font)}

/* ===========================================================
   TIPOGRAFÍA HELPERS (replican la referencia)
   =========================================================== */
.tracking-tightish{letter-spacing:-.01em}
.tracking-tighter2{letter-spacing:-.02em}
.eyebrow{font-weight:400;font-size:16px;line-height:24px;letter-spacing:.05em;text-transform:uppercase}
.hero-title{font-weight:400;font-size:64px;line-height:64px;letter-spacing:0}
.hero-title-mobile{font-size:32px;line-height:36px}
.hero-paragraph{font-weight:400;font-size:16px;line-height:24px;letter-spacing:0}
.hero-paragraph-mobile{font-size:15px;line-height:22px}
.text-principal{color:var(--principal)}
.text-principal-2{color:var(--principal-2)}
.text-principal-60{color:var(--principal-60)}
.text-principal-80{color:var(--principal-80)}
.bg-sec-20{background:var(--sec-20)}
.bg-sec-40{background:var(--sec-40)}
.bg-principal{background:var(--principal)}
.bg-principal-2{background:var(--principal-2)}

/* ===========================================================
   BOTONES
   =========================================================== */
.btn-arrow{transition:color .2s ease,background-color .2s ease}
.btn-arrow svg{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.btn-arrow:hover svg{transform:translateX(4px)}
.btn-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:500;font-size:16px;line-height:24px;height:50px;padding:0 32px;transition:background-color .2s ease,color .2s ease}
.btn-pill--dark{background:var(--principal);color:var(--sec-20)}
.btn-pill--dark:hover{background:#161a3d}
.btn-pill--sage{background:var(--principal-2);color:var(--sec-20)}
.btn-pill--sage:hover{background:#7e9794}

/* ===========================================================
   ENLACES / NAV
   =========================================================== */
.link-underline{position:relative;display:inline-block;padding-bottom:2px}
.link-underline::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right center;transition:transform .4s cubic-bezier(.65,.05,.36,1)}
.link-underline:hover::after,.link-underline.is-active::after{transform:scaleX(1);transform-origin:left center}
.nav-link{position:relative;color:var(--principal);padding-bottom:2px;white-space:nowrap;transition:color .2s ease}
.nav-link::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right center;transition:transform .4s cubic-bezier(.65,.05,.36,1)}
.nav-link:hover::after,.nav-link.is-active::after{transform:scaleX(1);transform-origin:left center}
.nav-link.is-active{font-weight:700}
.footer-link{text-decoration:none}

/* ===========================================================
   CAMPOS DE FORMULARIO (Contact Form 7 + helpers)
   =========================================================== */
.field-input,.field-select,.field-textarea,
.posidonia-form input[type=text],.posidonia-form input[type=email],
.posidonia-form input[type=tel],.posidonia-form select,.posidonia-form textarea{
  width:100%;background:#fff;border:1px solid #e1e1e1;border-radius:10px;padding:14px 18px;
  font-size:14px;line-height:22px;color:var(--principal);
  transition:border-color .2s ease,box-shadow .2s ease;font-family:inherit}
.field-input,.posidonia-form input[type=text],.posidonia-form input[type=email],.posidonia-form input[type=tel]{height:47px;padding-top:0;padding-bottom:0}
.field-select,.posidonia-form select{height:47px;padding-top:0;padding-bottom:0}
.field-textarea,.posidonia-form textarea{resize:vertical;min-height:114px;border-radius:15px}
.field-input:focus,.field-select:focus,.field-textarea:focus,
.posidonia-form input:focus,.posidonia-form select:focus,.posidonia-form textarea:focus{outline:0;border-color:var(--principal-2);box-shadow:0 0 0 1px var(--principal-2)}
.field-input::placeholder,.field-textarea::placeholder,.posidonia-form ::placeholder{color:var(--acento-40)}
.field-select,.posidonia-form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%230a0e2f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;background-size:12px 7px;padding-right:44px}
.check-square{appearance:none;width:18px;height:18px;border:1.25px solid var(--acento-40);border-radius:3px;background:#fff;cursor:pointer;flex-shrink:0;transition:all .15s ease;margin-top:1px;position:relative}
.check-square:checked{background:var(--principal);border-color:var(--principal)}
.check-square:checked::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}

/* ===========================================================
   ANIMACIONES REVEAL ON SCROLL
   =========================================================== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.reveal.in-view{opacity:1;transform:translateY(0)}
.reveal-fade{opacity:0;transition:opacity 1s ease-out}
.reveal-fade.in-view{opacity:1}
.reveal-left{opacity:0;transform:translateX(-32px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal-left.in-view{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(32px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal-right.in-view{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(.96);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1.2s cubic-bezier(.2,.7,.2,1)}
.reveal-scale.in-view{opacity:1;transform:scale(1)}
.delay-100{transition-delay:.1s}.delay-200{transition-delay:.2s}.delay-300{transition-delay:.3s}.delay-400{transition-delay:.4s}.delay-500{transition-delay:.5s}
@media (prefers-reduced-motion:reduce){.reveal,.reveal-fade,.reveal-left,.reveal-right,.reveal-scale{opacity:1!important;transform:none!important;transition:none!important}}

/* ===========================================================
   MARQUEE
   =========================================================== */
.marquee{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%)}
.marquee--solid{-webkit-mask-image:none;mask-image:none}
.marquee-track{display:inline-flex;flex-wrap:nowrap;align-items:center;gap:48px;padding-right:48px;white-space:nowrap;animation:marquee-scroll 28s linear infinite;will-change:transform}
.marquee-track>span{flex-shrink:0}
@keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ===========================================================
   CONTACT FORM 7 — layout y estados
   =========================================================== */
.posidonia-form .pf-grid{display:grid;grid-template-columns:1fr;gap:18px}
.posidonia-form .pf-field{display:flex;flex-direction:column}
.posidonia-form .pf-full{margin-top:18px}
/* Nota dentro del formulario (igual que el diseño: tras Mensaje, antes de consents) */
.posidonia-form .pf-note{margin-top:24px;background:var(--principal-2-40);border-radius:11px;padding:16px 20px;font-size:16px;line-height:24px;color:var(--acento)}
/* Texto bajo el botón Enviar */
.posidonia-form .pf-after{margin-top:12px;font-size:12px;line-height:18px;color:var(--acento-80);max-width:340px}
.posidonia-form label{font-size:14px;line-height:24px;letter-spacing:-.28px;color:#2b2b2b;margin-bottom:4px;font-weight:500;display:block}
.posidonia-form .wpcf7-form-control-wrap{display:block}
.posidonia-form .pf-consent{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.posidonia-form .wpcf7-acceptance .wpcf7-list-item{margin:0}
.posidonia-form .wpcf7-acceptance label{display:flex;align-items:flex-start;gap:9px;font-weight:400;font-size:9px;line-height:12px;letter-spacing:-.18px;color:var(--acento-60);margin:0;cursor:pointer}
.posidonia-form input[type=checkbox]{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1.25px solid var(--acento-40);border-radius:3px;background:#fff;cursor:pointer;flex-shrink:0;margin-top:0;position:relative}
.posidonia-form input[type=checkbox]:checked{background:var(--principal);border-color:var(--principal)}
.posidonia-form input[type=checkbox]:checked::after{content:'';position:absolute;left:4.5px;top:1px;width:4px;height:9px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.posidonia-form .pf-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
/* Enviar (Figma): píldora SALVIA sin flecha; desktop 279x50 a la derecha, móvil ancho completo 70px */
.posidonia-form .wpcf7-submit{display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;background-color:var(--principal-2);color:var(--sec-20);border:0;border-radius:999px;height:70px;padding:0 26px;font-size:16px;line-height:24px;font-weight:500;cursor:pointer;margin-top:28px;font-family:inherit;transition:background-color .2s ease}
.posidonia-form .wpcf7-submit:hover{background-color:#7e9794}
@media (min-width:768px){
	.posidonia-form .wpcf7-submit{width:279px;height:50px;margin-left:auto}
	.posidonia-form .pf-after{margin-left:auto;max-width:274px}
}
.posidonia-form .wpcf7-not-valid{border-color:#d04545!important;box-shadow:0 0 0 1px #d04545!important}
.posidonia-form .wpcf7-not-valid-tip{color:#d04545;font-size:12px;line-height:18px;margin-top:6px;display:block}
.posidonia-form .wpcf7-response-output{border-radius:10px;font-size:14px;line-height:20px;margin:20px 0 0!important;padding:12px 16px!important}
.posidonia-form .wpcf7-spinner{margin:0 0 0 12px}

/* ===========================================================
   PÁGINAS LEGALES
   =========================================================== */
.legal-eyebrow{font-size:13px;line-height:20px;letter-spacing:.05em;text-transform:uppercase;color:var(--principal-60)}
.legal-h1{font-weight:400;font-size:40px;line-height:48px;letter-spacing:-.01em;color:var(--principal)}
.legal-h2{font-weight:500;font-size:22px;line-height:30px;letter-spacing:-.005em}
.legal-h3{font-weight:500;font-size:18px;line-height:26px;letter-spacing:-.005em;color:var(--principal)}
@media (min-width:1024px){.legal-eyebrow{font-size:14px}.legal-h1{font-size:64px;line-height:72px}.legal-h2{font-size:28px;line-height:36px}.legal-h3{font-size:20px;line-height:28px}}
.legal-body{max-width:820px}
.legal-body p,.legal-body li{font-weight:400;font-size:16px;line-height:26px;color:var(--principal-80)}
@media (min-width:1024px){.legal-body p,.legal-body li{font-size:17px;line-height:28px}}
.legal-body p+p{margin-top:16px}
.legal-body ol+p,.legal-body ul+p{margin-top:16px}
.legal-body h2{margin-top:40px;margin-bottom:12px;color:var(--principal);font-weight:500;font-size:22px;line-height:30px;letter-spacing:-.005em}
.legal-body h3{margin-top:28px;margin-bottom:8px;font-weight:500;font-size:18px;line-height:26px;color:var(--principal)}
@media (min-width:1024px){.legal-body h2{margin-top:56px;margin-bottom:16px;font-size:28px;line-height:36px}.legal-body h3{margin-top:36px;margin-bottom:10px;font-size:20px;line-height:28px}}
.legal-body ul,.legal-body ol{list-style:none;padding:0;margin:12px 0 0}
.legal-body ul li{position:relative;padding-left:18px;margin-top:8px}
.legal-body ul li::before{content:'–';position:absolute;left:0;color:var(--principal-2)}
.legal-body ol{counter-reset:legal-counter}
.legal-body ol li{position:relative;padding-left:28px;margin-top:12px;counter-increment:legal-counter}
.legal-body ol li::before{content:counter(legal-counter,lower-alpha) ')';position:absolute;left:0;color:var(--principal-2);font-weight:500}
.legal-body a{color:var(--principal);text-decoration:underline;text-underline-offset:3px}
.legal-body a:hover{color:var(--principal-2)}

/* ===========================================================
   ELEMENTOR — anchura de contenido y resets
   =========================================================== */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con{max-width:var(--container)}
/* Páginas a ancho completo: sin restricciones del tema */
.posidonia-fullwidth .elementor{width:100%}