/*
Theme Name: CREAAR Theme
Theme URI: https://creaar.es
Author: CREAAR
Author URI: https://creaar.es
Description: Tema personalizado creado por CREAAR.
Version: 1.0
Template: astra
*/


/* ============ Variables de marca ============ */
:root{
  --rose:#ff2f7a;
  --ink:#141414;
  --ink-invert:#ffffff;
  --bg:#0b0b0b;
  --container:1100px; /* ancho "en caja" por defecto */
}

/* ============ Header negro + menú ============ */
.site-header,
.main-header-bar{
  background:var(--bg);
  color:var(--ink-invert);
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* enlaces del menú principal (desktop) */
.main-header-bar .main-header-menu .menu-link,
.main-header-bar .main-header-menu a{
  color:var(--ink-invert);
  opacity:.95;
}
.main-header-bar .main-header-menu .menu-link:hover,
.main-header-bar .main-header-menu .current-menu-item > .menu-link,
.main-header-bar .main-header-menu a:hover{
  color:var(--rose);
  opacity:1;
}

/* submenús */
.main-header-menu .sub-menu,
.ast-desktop .main-header-menu .sub-menu{
  background:#111;
  border:1px solid #1e1e1e;
}
.main-header-menu .sub-menu a{ color:#fff; }
.main-header-menu .sub-menu a:hover{ color:var(--rose); }

/* botón personalizado del header (si usas el builder de Astra) */
.ast-custom-button a,
.ast-primary-header-bar .ast-custom-button a{
  background:var(--rose);
  color:#fff;
  border-radius:999px;
  padding:.5rem 1rem;
  font-weight:700;
}
.ast-custom-button a:hover{
  filter:brightness(1.08);
  box-shadow:0 8px 18px rgba(255,47,122,.25);
}

/* menú móvil */
.ast-mobile-header-wrap,
.ast-header-break-point .main-header-bar{ background:var(--bg); }
.ast-header-break-point .main-header-menu .menu-link{ color:#fff; }
.ast-header-break-point .main-header-menu .menu-link:hover{ color:var(--rose); }
/* icono hamburguesa móvil */
.ast-header-break-point .ast-button-wrap .menu-toggle,
.ast-header-break-point .ast-mobile-menu-buttons .menu-toggle{
  color:#fff; border-color:#2a2a2a;
}

/* ============ Botones/CTAs globales ============ */
a.button, .ast-custom-button, .wp-element-button, .button, button, input[type=submit]{
  background:var(--rose) !important;
  color:#fff !important;
  border-radius:999px !important;
  font-weight:700 !important;
}
a.button:hover, .ast-custom-button:hover, .wp-element-button:hover, .button:hover, button:hover, input[type=submit]:hover{
  filter:brightness(1.08);
  box-shadow:0 8px 18px rgba(255,47,122,.25);
}

/* ============ Layout ============ */
/* "Caja" por defecto */
.ast-container{ max-width:var(--container); }
/* Home a ancho completo (la clase body-full la añade functions.php) */
.body-full .ast-container{ max-width:100% !important; }

/* Alineación centrada del hero (si usas el bloque de hero) */
#hero .hero-inner{ width:min(1100px,92%); margin:0 auto; }

/* ============ Sin hueco entre header y primera sección (Home) ============ */
.home header{ border-bottom:none; } /* sin línea blanca sobre la imagen */

.home header + .site-content,
.home .site-content,
.home .site-content > .ast-container,
.home .entry-content > *:first-child,
.home .elementor > .elementor-section:first-of-type,
.home .elementor-section-wrap > .elementor-section:first-of-type{
  margin-top:0 !important;
  padding-top:0 !important;
  border-top:0 !important;
}

/* por si la plantilla usa .ast-plain-container / padding superior */
.home .ast-plain-container .site-content,
.home .ast-container{ padding-top:0 !important; }

/* última red de seguridad (si algún theme deja 1px) */
.home header + *{ margin-top:-1px !important; }

/* ============ Footer oscuro ============ */
.site-footer, .site-primary-footer-wrap{ background:#0b0b0b; color:#fff; }
.site-footer a{ color:var(--rose); }
.site-footer a:hover{ text-decoration:underline; }

/* ============ Ajustes varios ============ */
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

@media (max-width:921px){
  .ast-container{ padding-left:16px; padding-right:16px; }
}
/* ===== Ajuste header móvil: más alto y con espacio para la uña ===== */
@media (max-width: 900px){
  /* un poco más de alto y respeto del notch */
  header{
    padding: max(12px, env(safe-area-inset-top)) 0 12px;
    overflow: visible; /* por si algún builder mete overflow oculto */
  }

  /* reservamos un carril a la derecha para el botón (uña) */
  .nav-wrap{
    position: relative;
    min-height: 64px;                 /* altura cómoda */
    padding-left: 4%;
    padding-right: calc(4% + 64px + env(safe-area-inset-right)); /* 64px = ancho botón */
  }

  /* logo un pelín más contenido para que todo respire */
  .brand img{ max-height: 40px; }

  /* botón uña: más grande y dentro del header */
  .nail-btn{
    display: inline-flex;
    width: 48px;                      /* antes 42px */
    height: 48px;
    border-radius: 12px;
    right: calc(4% + env(safe-area-inset-right));
    top: 8px;                         /* baja un poco para que no toque el borde */
  }
  .nail{ width: 24px; height: 24px; } /* icono proporcional al nuevo botón */
}
/* ==== Encapsulado y correcciones para la sección de tarifas ==== */

/* offset para que el header sticky no tape el título al saltar a #tarifas */
:root{ --header-h:72px; }
html{ scroll-padding-top: calc(var(--header-h) + 8px); }
#tarifas{ scroll-margin-top: calc(var(--header-h) + 8px); }

/* Evita que estilos globales de .head/.wrap afecten aquí */
.sec-tarifas{ background:#fff; color:#111; isolation:isolate; } /* saca del stacking context si hay filtros arriba */
.sec-tarifas .wrap{ width:min(1100px,92%); margin:auto; }

/* Asegura que NO tenga fondo negro ni opacidades heredadas */
.sec-tarifas .head{ 
  background:transparent !important; 
  box-shadow:none !important; 
  opacity:1 !important; 
  filter:none !important; 
}

/* Colores fuertes dentro de la sección (por si algo global los pisa) */
.sec-tarifas .title,
.sec-tarifas .lead,
.sec-tarifas .card,
.sec-tarifas .card h3,
.sec-tarifas .card .cta{
  color:#111 !important;
}

/* Botón “Ver precios” vuelve a su color de marca */
.sec-tarifas .card .cta{
  border:2px solid var(--rose);
  color:var(--rose) !important;
}

/* Hover (solo escritorio) — muestra el precio en el botón */
@media (hover:hover){
  .sec-tarifas .card:hover{ 
    background:rgba(255,47,122,.03); 
    transform:translateY(-3px); 
    box-shadow:0 12px 20px rgba(255,47,122,.12);
  }
  .sec-tarifas .card:hover .cta{
    background:var(--rose);
    color:#fff !important;
    position:relative;
  }
  .sec-tarifas .card:hover .cta::before{
    content:attr(data-price);
    position:absolute; inset:0; display:grid; place-items:center;
  }
  .sec-tarifas .card:hover .cta{ color:transparent !important; }
}

/* Grid responsivo (si alguno global lo pisa) */
.sec-tarifas .grid{ display:grid; gap:18px; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:1000px){ .sec-tarifas .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .sec-tarifas .grid{ grid-template-columns:1fr; } }

/* Tarjetas */
.sec-tarifas .card{
  background:#fff;
  border:2px solid var(--rose);
  border-radius:16px;
  padding:22px 20px;
  text-decoration:none;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  box-shadow:0 6px 12px rgba(0,0,0,.04);
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}