/* ---------- Tokens de marca (referencia rápida) ----------
     --tinta:      #2E251C   texto / fondos oscuros
     --crema:      #F7F1E7   fondo claro base
     --crema-2:    #FCF8F0   cremas de tarjeta / campos
     --arena:      #F1E8D7   secciones y tarjetas claras
     --terracota:  #BE6A47   color de acción / acento principal
     --terracota-h:#A85A39   terracota hover
     --arcilla:    #A9744F   acentos secundarios / itálicas
     --salvia:     #7F856A   verde de confirmación
  ------------------------------------------------------------- */
  :root{
    --tinta:#2E251C; --crema:#F7F1E7; --crema-2:#FCF8F0; --arena:#F1E8D7;
    --terracota:#BE6A47; --terracota-h:#A85A39; --arcilla:#A9744F; --salvia:#7F856A;
    --sans:'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
    --serif:'Playfair Display', Georgia, serif;
  }
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  html, body { margin: 0; padding: 0; }
  body { background: var(--tinta); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
  ::selection { background: var(--arcilla); color: var(--crema-2); }
  input, textarea, button { font-family: inherit; }

  @keyframes acoMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* Reveal on scroll */
  .reveal { opacity: 0; transform: translateY(28px);
            transition: opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1); }
  .reveal.is-in { opacity: 1; transform: none; }

  /* ---------- Estados hover / focus ---------- */
  .nav-cta, .btn-terracota { transition: background .45s ease, color .45s ease, transform .25s ease !important; }
  .nav-cta:hover { background: #F1E8D7; color: #2E251C; transform: translateY(-1px); }
  .menu-link:hover { color: #E7B98F; }
  .nav-lang { transition: opacity .25s ease; }
  .nav-lang:hover { opacity: 1 !important; }
  @media (max-width: 380px){ [data-nav-langs]{ display:none !important; } }
  .lang-link:hover { color: #E7B98F; }
  .btn-terracota:hover { background: #F1E8D7; color: #2E251C; transform: translateY(-2px); }
  .btn-arena:hover { background: #FCF8F0; transform: translateY(-1px); }
  .cta-arena { transition: background .45s ease, color .45s ease, transform .25s ease; }
  .cta-arena:hover { background: #BE6A47; color: #FBF4E9; transform: translateY(-1px); }
  .gbadge:hover { background: rgba(252,248,240,0.20); border-color: #FCE7D2; }

  /* ---------- Bloque de contacto (terracota) ---------- */
  .c-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #F4D8C2; margin-bottom: 8px; }
  .c-link, .c-val { color: #FBF4E9; font-size: clamp(17px,1.5vw,20px); line-height: 1.4; }
  .c-link { text-decoration: none; border-bottom: 1px solid rgba(251,244,233,0.4); padding-bottom: 2px; transition: border-color .2s ease; }
  .c-link:hover { border-color: #FBF4E9; }
  .cfield { width: 100%; background: transparent; border: none; border-bottom: 1.5px solid rgba(251,244,233,0.42); color: #FBF4E9; font-family: inherit; font-size: 18px; padding: 12px 2px; outline: none; transition: border-color .25s ease; }
  .cfield::placeholder { color: rgba(251,244,233,0.65); }
  .cfield:focus { border-bottom-color: #FBF4E9; }
  textarea.cfield { resize: vertical; min-height: 92px; line-height: 1.5; }
  .chip { cursor: pointer; }
  .chip input { position: absolute; opacity: 0; width: 0; height: 0; }
  .chip span { display: inline-flex; align-items: center; height: 46px; padding: 0 24px; border: 1.5px solid rgba(251,244,233,0.42); border-radius: 100px; color: #FBF4E9; font-size: 16px; transition: background .2s ease, border-color .2s ease; }
  .chip span:hover { border-color: #FBF4E9; }
  .chip input:checked + span { background: #2E251C; border-color: #2E251C; }
  .chip input:focus-visible + span { outline: 2px solid #FBF4E9; outline-offset: 3px; }

  /* ---------- Tarjetas de servicios ---------- */
  .serv-card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    padding: 44px 42px !important; min-height: 300px !important; gap: 16px !important; justify-content: flex-start !important; }
  .serv-card h3 { font-size: clamp(23px,2vw,31px) !important; min-height: 2.4em; margin: 0 !important; }
  .serv-card p { font-size: clamp(16px,1.4vw,19px) !important; }
  .serv-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(46,37,28,.10); border-color: #CBB78F; }
  .hl { color: #2E251C; font-weight: 500; padding: 3px 11px; border-radius: 5px;
        background-image: linear-gradient(#E7B98F, #E7B98F); background-repeat: no-repeat;
        background-position: left center; background-size: var(--hlfill, 0%) 100%;
        -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  @media (prefers-reduced-motion: reduce){ .hl{ background-size: 100% 100% !important; } }
  @media (max-width: 1040px){ [data-serv-grid]{ grid-template-columns: 1fr 1fr !important; } [data-serv-title]{ grid-template-columns: 1fr 1fr !important; } }
  @media (max-width: 620px){ [data-serv-grid]{ grid-template-columns: 1fr !important; } [data-serv-title]{ grid-template-columns: 1fr !important; } [data-serv-title] > a{ grid-column: 1 !important; } }

  /* ---------- Relleno de texto por scroll (manifiesto) ---------- */
  .manifiesto-fill { color: transparent; -webkit-background-clip: text; background-clip: text;
    background-repeat: no-repeat;
    background-image: linear-gradient(to bottom, #2E251C 0%, #2E251C var(--fill,0%), #D3C6B2 var(--fill,0%), #D3C6B2 100%); }
  .manifiesto-fill span { color: inherit; }
  @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .manifiesto-fill { color: #2E251C; } }
  @media (prefers-reduced-motion: reduce){ .manifiesto-fill{ background-image: none; color: #2E251C; } }

  /* ---------- Cinta de reseñas ---------- */
  .reviews-track { align-items: stretch; }

  /* ---------- Foto a pantalla completa (horizontal / vertical en móvil) ---------- */
  .pin-photo { background-image: var(--img-retrato); background-size: cover;
               background-position: center 22%; background-color: #C4A98A; }
  @media (max-width: 820px){
    .pin-photo { background-image: var(--img-retrato-movil); background-position: center 30%; }
  }

  /* ---------- Hero en móvil: píldoras apiladas a ancho completo ---------- */
  @media (max-width: 820px){
    [data-hero-pills]{ flex-direction: column !important; align-items: stretch !important;
                       justify-content: flex-start !important; gap: 12px !important; }
    [data-hero-pills] .gbadge{ width: 100%; }
    [data-hero-pills] .cta-arena{ width: 100%; justify-content: center; }
  }

  /* ---------- Contacto en móvil: primero el formulario, luego los datos ---------- */
  @media (max-width: 820px){
    [data-r="cta"]{ gap: 0 !important; }
    [data-r="cta"] > div:nth-child(1){ order: 2; margin-top: 56px; padding-top: 48px;
                                       border-top: 1px solid rgba(251,244,233,0.28); }
    [data-r="cta"] > div:nth-child(2){ order: 1; }
    [data-r="cta"] .cfield{ font-size: 17px; }
    [data-r="cta"] .btn-arena{ width: 100%; justify-content: center; }
  }

  /* ---------- Responsive (idéntico al diseño original) ---------- */
  @media (max-width: 960px){
    [data-r="cta"]{ grid-template-columns:1fr!important; gap:36px!important; }
    [data-r="foot"]{ grid-template-columns:1fr 1fr!important; gap:32px!important; }
    [data-r="foot"] [data-foot-brand]{ grid-column:1 / -1!important; }
  }
  @media (max-width: 600px){
    [data-pad]{ padding-left:22px!important; padding-right:22px!important; }
    [data-hero-foot]{ flex-direction:column!important; align-items:flex-start!important; gap:26px!important; padding-right:0!important; }
    [data-cta-nav]{ display:none!important; }
    [data-r="foot"]{ grid-template-columns:1fr!important; }
    [data-r="foot"] [data-foot-brand]{ grid-column:auto!important; }
    [data-menu-links] a{ font-size:44px!important; }
  }

  /* ---------- Cursor personalizado (solo ratón) ---------- */
  @media (pointer: fine){
    html.cursor-on body.amicia, html.cursor-on body.amicia * { cursor: none !important; }
    /* El puntero vuelve donde no es la web: barra de admin y editor */
    html.cursor-on #wpadminbar, html.cursor-on #wpadminbar *,
    body.elementor-editor-active, body.elementor-editor-active * { cursor: auto !important; }
    .cursor-ring, .cursor-dot, .cursor-ripple { position: fixed; top: 0; left: 0; z-index: 9000; pointer-events: none; border-radius: 50%; mix-blend-mode: difference; }
    .cursor-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.6px solid #fff; opacity: 0;
      transition: width .28s cubic-bezier(.22,1,.36,1), height .28s cubic-bezier(.22,1,.36,1), margin .28s cubic-bezier(.22,1,.36,1), background .28s ease, opacity .3s ease; will-change: transform; }
    .cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; opacity: 0; transition: opacity .3s ease; will-change: transform; }
    html.cursor-on .cursor-ring, html.cursor-on .cursor-dot { opacity: 1; }
    .cursor-ring.is-hover { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: #fff; }
    .cursor-ring.is-down { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
    .cursor-ripple { width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 1.6px solid #fff; animation: cursorRipple .6s ease-out forwards; }
    @keyframes cursorRipple { from { transform: scale(.4); opacity: .8; } to { transform: scale(3.6); opacity: 0; } }
  }
  @media (prefers-reduced-motion: reduce){ .cursor-ring { transition: opacity .3s ease; } }


/* ═══════════════════════════════════════════════════════════════
   Ajustes para que WordPress, el tema y Elementor no alteren
   el diseño ni rompan las animaciones.
   ═══════════════════════════════════════════════════════════════ */

/* Base de la página */
html, body.amicia, body.amicia.elementor-page {
  margin: 0 !important; padding: 0 !important;
  background: #F7F1E7 !important; color: #2E251C !important;
  font-family: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif !important;
  max-width: none !important;
}
/* overflow-x: clip (no hidden) para no romper el pineado de la foto */
html.amicia-html, body.amicia { overflow-x: clip !important; }

/* Las secciones ocupan todo el ancho y sin separaciones heredadas */
body.amicia .elementor-section.elementor-section-boxed > .elementor-container { max-width: none !important; }
body.amicia .elementor-section > .elementor-container,
body.amicia .elementor-widget-html,
body.amicia .elementor-widget-html > .elementor-widget-container,
body.amicia .elementor-widget-wrap,
body.amicia .elementor-column > .elementor-element-populated { margin: 0 !important; padding: 0 !important; }
body.amicia .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated { padding: 0 !important; }

/* NINGÚN contenedor puede recortar el scroll: es lo que permite que la foto
   se quede fija (position:sticky) mientras el bloque siguiente pasa por encima. */
body.amicia .elementor,
body.amicia .elementor-section-wrap,
body.amicia .elementor-section,
body.amicia .elementor-container,
body.amicia .elementor-row,
body.amicia .elementor-column,
body.amicia .elementor-element,
body.amicia .elementor-widget-wrap,
body.amicia .elementor-widget-html,
body.amicia .elementor-widget-html > .elementor-widget-container { overflow: visible !important; }

/* Si el tema deja su cabecera o su pie, los ocultamos: la web trae los suyos */
body.amicia header#masthead, body.amicia .site-header, body.amicia #site-header,
body.amicia footer#colophon, body.amicia .site-footer, body.amicia #site-footer,
body.amicia .wp-site-blocks > header, body.amicia .wp-site-blocks > footer { display: none !important; }

/* La barra de administración desplaza la página: recolocamos lo que va fijo */
body.amicia.admin-bar #nav { top: 32px; }
body.amicia.admin-bar #menu { top: 32px; height: calc(100% - 32px); }
@media screen and (max-width: 782px) {
  body.amicia.admin-bar #nav { top: 46px; }
  body.amicia.admin-bar #menu { top: 46px; height: calc(100% - 46px); }
}

/* El tema no debe imponer tamaños ni márgenes a nuestros textos */
body.amicia h1, body.amicia h2, body.amicia h3,
body.amicia p, body.amicia ul, body.amicia li, body.amicia figure, body.amicia blockquote { margin: 0; }
body.amicia img { max-width: none; height: auto; }
body.amicia a { text-decoration: none; }
body.amicia button, body.amicia input, body.amicia textarea { font-family: inherit; }

/* En el editor de Elementor dejamos ver las secciones fijas sin que tapen la interfaz */
body.elementor-editor-active .amicia-cursor,
body.elementor-editor-active #menu { display: none !important; }

/* ── El cursor personalizado se desactiva por completo dentro del editor ── */
body.elementor-editor-active .cursor-ring,
body.elementor-editor-active .cursor-dot,
body.elementor-editor-active .cursor-ripple { display: none !important; }

/* ── La barra de administración manda: nada de la web se pone por encima ── */
body.amicia #nav  { z-index: 60; }
body.amicia #menu { z-index: 80; }
#wpadminbar { z-index: 99999 !important; }

/* ── Con la barra de admin, las secciones a pantalla completa se ajustan ── */
body.amicia.admin-bar section[style*="100vh"],
body.amicia.admin-bar .pin-img { min-height: calc(100vh - 32px) !important; }
@media screen and (max-width: 782px) {
  body.amicia.admin-bar section[style*="100vh"],
  body.amicia.admin-bar .pin-img { min-height: calc(100vh - 46px) !important; }
}

/* ── Los campos del formulario no heredan el estilo del tema ── */
body.amicia .cfield,
body.amicia input.cfield,
body.amicia textarea.cfield {
  -webkit-appearance: none; appearance: none;
  border: none !important; border-bottom: 1.5px solid rgba(251,244,233,0.42) !important;
  border-radius: 0 !important; background: transparent !important;
  box-shadow: none !important; outline: none !important;
  color: #FBF4E9 !important; font-family: inherit !important;
}
body.amicia .cfield:focus { border-bottom-color: #FBF4E9 !important; }
body.amicia .chip input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
body.amicia button[type="submit"] { -webkit-appearance: none; appearance: none; }

/* ── Respaldo: si no se aplicó la plantilla Lienzo, se oculta la cabecera y el
      pie del tema sea cual sea su nombre. El pie de la web va dentro de las
      secciones de Elementor, así que esto no lo afecta. ── */
body.amicia > header, body.amicia > footer,
body.amicia > .site-header, body.amicia > .site-footer,
body.amicia > #header, body.amicia > #footer,
body.amicia > .wp-site-blocks > header, body.amicia > .wp-site-blocks > footer { display: none !important; }