/*
Theme Name: Astra Nydia
Theme URI: https://nydiasleepcoach.com/
Description: Tema hijo de Astra para el blog de Nydia Sleep. Reemplaza el encabezado y el pie de Astra por los de la landing, para que el blog y el sitio se vean como una sola cosa.
Author: Delta App
Template: astra
Version: 1.0
Text Domain: astra-nydia
*/

/* ══ Paleta y tipografía de la landing ═══════════════════════════════════ */
:root{
  --nyd-lila:#7C7BD4; --nyd-lila-suave:#A6A7D6; --nyd-lila-claro:#ECECF7;
  --nyd-crema:#F4E9E4; --nyd-papel:#FAF7F4; --nyd-salvia:#8FA897;
  --nyd-tinta:#3E424B; --nyd-texto:#5F646D; --nyd-tenue:#8C909A;
  --nyd-borde:#ECE6E0; --nyd-sombra:0 6px 20px rgba(124,123,212,.07);
}

body, button, input, select, textarea,
.ast-container, .entry-content, .site-title{
  font-family:"Nunito", system-ui, -apple-system, sans-serif;
}
body{ color:var(--nyd-texto); line-height:1.7; }
/* Astra pinta el fondo en sus contenedores, no en body. */
body, .site, #page, #content, .ast-separate-container{
  background-color:var(--nyd-papel) !important;
}
h1,h2,h3,h4,h5,h6,.entry-title{
  font-family:"Nunito", system-ui, sans-serif; font-weight:800;
  color:var(--nyd-tinta); line-height:1.2;
}
a{ color:var(--nyd-lila); }
a:hover,a:focus{ color:var(--nyd-lila); opacity:.85; }
.entry-content a{ text-decoration:underline; text-underline-offset:3px; }
.entry-content strong{ color:var(--nyd-tinta); font-weight:800; }

/* ══ Encabezado — réplica del de la landing ══════════════════════════════ */
.nyd-hdr-wrap{
  position:relative; z-index:10; background:rgba(250,247,244,.86);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--nyd-borde);
}
.nyd-hdr{
  max-width:1200px; margin:0 auto; padding:13px 24px;
  display:flex; align-items:center; gap:24px;
}
.nyd-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.nyd-logo-1{ font-weight:800; color:var(--nyd-salvia); font-size:22px; }
.nyd-logo-2{ color:var(--nyd-lila-suave); margin-left:5px; letter-spacing:.14em; font-size:13px; font-weight:800; }
.nyd-nav{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; margin-left:auto; }
.nyd-nav a{ font-weight:600; font-size:14px; color:var(--nyd-tinta); text-decoration:none; }
.nyd-nav a:hover{ color:var(--nyd-lila); opacity:1; }
/* Convención: el ÚLTIMO elemento del menú se pinta como botón, igual que el
   CTA de la landing. Así Nydia puede cambiarlo desde Apariencia → Menús sin
   tocar código. */
.nyd-nav .nyd-nav-cta a, a.nyd-nav-cta{
  background:var(--nyd-lila); color:#fff !important; font-weight:700;
  padding:9px 20px; border-radius:999px; box-shadow:0 10px 30px rgba(166,167,214,.18);
}
.nyd-nav .nyd-nav-cta a:hover{ opacity:.9; }
.nyd-nav ul{ display:flex; gap:22px; align-items:center; margin:0; padding:0; list-style:none; }
.nyd-burger{
  display:none; margin-left:auto; background:transparent; border:none;
  color:var(--nyd-tinta); cursor:pointer; padding:6px; line-height:0;
}
.nyd-burger svg{ width:26px; height:26px; }
.nyd-burger .cerrar{ display:none; }

@media (max-width:960px){
  .nyd-burger{ display:inline-flex; }
  .nyd-nav{
    display:none; position:absolute; top:100%; left:0; right:0; margin:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--nyd-papel); border-bottom:1px solid var(--nyd-borde);
    padding:8px 24px 20px; box-shadow:0 16px 40px rgba(95,100,109,.10);
  }
  .nyd-hdr.nav-open .nyd-nav{ display:flex; }
  .nyd-nav ul{ flex-direction:column; align-items:stretch; gap:0; }
  .nyd-nav li a{ display:block; padding:14px 4px; font-size:16px; border-bottom:1px solid var(--nyd-borde); }
  .nyd-nav .nyd-nav-cta a{ display:block; text-align:center; margin-top:14px; border-bottom:none; }
  .nyd-hdr.nav-open .nyd-burger .abrir{ display:none; }
  .nyd-hdr.nav-open .nyd-burger .cerrar{ display:inline; }
}

/* ══ Contenido ═══════════════════════════════════════════════════════════ */
/* Astra trae el listado en rejilla de 3 columnas (.ast-grid-3, flex con 33%
   de ancho): con pocas entradas las tarjetas quedan diminutas y perdidas en
   la página. Se pasa a una sola columna con un ancho de lectura cómodo —a
   1200px el texto pasaría de 100 caracteres por línea. */
#primary{ max-width:820px; margin-left:auto; margin-right:auto; }
#primary .ast-row{ display:block !important; }
#primary .ast-article-post{ width:100% !important; margin:0 0 28px !important; }
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.ast-separate-container .comment-respond,
.ast-separate-container .ast-comment-list li{
  background:#fff; border:1px solid var(--nyd-borde); border-radius:24px;
  box-shadow:var(--nyd-sombra); padding:34px 38px;
}
@media(max-width:600px){
  .ast-separate-container .ast-article-post,
  .ast-separate-container .ast-article-single{ padding:26px 22px; border-radius:20px; }
}
.entry-title a{ color:var(--nyd-tinta); text-decoration:none; }
.entry-title a:hover{ color:var(--nyd-lila); }

/* Astra pinta de azul los <span> de la firma (.posted-by, .author-name,
   .posted-on), no los <a> — y uno de esos spans va DENTRO del enlace. */
.entry-meta, .entry-meta *,
.ast-blog-meta-container, .ast-blog-meta-container *,
.post-meta, .post-meta *{ color:var(--nyd-tenue) !important; font-size:14px; }
.entry-meta a:hover, .entry-meta a:hover *{ color:var(--nyd-lila) !important; }
.entry-meta a{ font-weight:700; text-decoration:none; }

.ast-button,.button,button,input[type="submit"],.wp-block-button__link{
  background:var(--nyd-lila); border-color:var(--nyd-lila); color:#fff;
  border-radius:999px; font-weight:800; padding:13px 28px;
}
.ast-button:hover,.button:hover,button:hover,input[type="submit"]:hover{
  background:var(--nyd-lila); opacity:.9; color:#fff;
}
.entry-content blockquote{
  border-left:3px solid var(--nyd-lila); background:var(--nyd-crema);
  border-radius:0 16px 16px 0; padding:20px 26px; font-style:italic;
}

/* ══ Piezas de artículo ══════════════════════════════════════════════════ */
/* Entradilla: el primer párrafo, un punto más grande, como en la landing. */
.entry-content .nyd-entradilla{ font-size:19px; line-height:1.65; color:var(--nyd-tinta); }

/* Tabla de datos (ventanas de sueño y las que vengan). */
.nyd-tabla{ margin:28px 0; overflow-x:auto; }
.nyd-tabla table{ width:100%; border-collapse:collapse; font-size:15px; }
.nyd-tabla th{
  background:var(--nyd-lila); color:#fff; text-align:left; font-weight:800;
  padding:12px 14px; font-size:14px;
}
.nyd-tabla th:first-child{ border-radius:12px 0 0 0; }
.nyd-tabla th:last-child{ border-radius:0 12px 0 0; }
/* Solo líneas horizontales: el estilo de tablas de bloques de WordPress pone
   recuadro completo y la tabla se leía como cuadrícula, no como lista de
   datos. Va con `table td` (y no solo `td`) porque esa hoja carga después y
   con la misma especificidad ganaba ella. */
.entry-content .nyd-tabla table td,
.entry-content .nyd-tabla table th{ border:none; }
.entry-content .nyd-tabla table td{
  padding:12px 14px; color:var(--nyd-texto);
  border-bottom:1px solid var(--nyd-borde);
}
.nyd-tabla tbody tr:nth-child(odd){ background:var(--nyd-papel); }

/* Aviso sanitario: se separa del cuerpo para que no se lea de corrido. */
.entry-content .nyd-aviso{
  background:var(--nyd-lila-claro); border-radius:16px; padding:20px 24px;
  font-size:15px; color:var(--nyd-texto);
}

/* Botón dentro del artículo (CTA propio de la entrada). */
.entry-content a.nyd-btn{
  display:inline-block; background:var(--nyd-lila); color:#fff;
  border-radius:999px; padding:14px 28px; font-weight:800;
  text-decoration:none; box-shadow:0 6px 20px rgba(124,123,212,.2);
}
.entry-content a.nyd-btn:hover{ opacity:.9; color:#fff; }

/* Firma de la autora al cierre. */
.entry-content .nyd-firma{
  border-top:1px solid var(--nyd-borde); margin-top:32px; padding-top:20px;
  font-size:15px; font-style:italic; color:var(--nyd-tenue);
}
.entry-content .nyd-firma strong{ color:var(--nyd-texto); }

/* ══ Pie — réplica del de la landing ═════════════════════════════════════ */
.nyd-pie{ background:var(--nyd-crema); }
.nyd-pie-inner{ max-width:1200px; margin:0 auto; padding:64px 24px 40px; }
.nyd-pie-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:36px; }
.nyd-pie-marca p{ font-size:14px; color:var(--nyd-texto); max-width:280px; margin:14px 0 0; }
.nyd-pie-col h3{ font-weight:700; color:var(--nyd-tinta); margin:0 0 14px; font-size:14px; }
.nyd-pie-col ul{ display:flex; flex-direction:column; gap:10px; font-size:14px; margin:0; padding:0; list-style:none; }
.nyd-pie-col a{ color:var(--nyd-texto); text-decoration:none; }
.nyd-pie-col a:hover{ color:var(--nyd-lila); }
.nyd-pie-bottom{
  border-top:1px solid var(--nyd-borde); margin-top:40px; padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:12px; color:var(--nyd-tenue);
}

/* ══ Portada de la entrada ═══════════════════════════════════════════════ */
.nyd-hero{
  background:linear-gradient(180deg,#FBF9F7 0%,var(--nyd-papel) 100%);
  border-bottom:1px solid var(--nyd-borde); overflow:hidden;
}
.nyd-hero-inner{
  position:relative; max-width:1200px; margin:0 auto; min-height:420px;
  display:flex; align-items:center; padding:56px 24px;
}
.nyd-hero-texto{ position:relative; z-index:2; max-width:560px; }
.nyd-hero-titulo{
  margin:0; font-size:clamp(30px,4.4vw,52px); line-height:1.06;
  font-weight:800; color:var(--nyd-tinta); letter-spacing:-.015em; text-wrap:balance;
}
.nyd-hero-sub{
  margin:8px 0 0; font-size:clamp(20px,2.6vw,30px); line-height:1.2;
  font-weight:700; color:var(--nyd-lila-suave);
}
.nyd-hero-regla{
  display:block; width:56px; height:2px; background:var(--nyd-salvia);
  border-radius:2px; margin:26px 0 22px; opacity:.75;
}
.nyd-hero-extracto{
  margin:0; font-size:16px; line-height:1.65; color:var(--nyd-texto); max-width:440px;
}
.nyd-hero-lema{ display:flex; align-items:center; gap:12px; margin-top:34px; }
.nyd-hero-lema svg{ width:26px; height:26px; flex-shrink:0; }
.nyd-hero-lema span{
  font-family:"Caveat", cursive; font-size:22px; color:var(--nyd-salvia); font-weight:600;
}

/* La foto se funde con el fondo por máscara y no por una capa encima: así el
   crema del encabezado se ve a través, sin un velo que apague la imagen. */
.nyd-hero-foto{
  position:absolute; top:0; right:0; bottom:0; width:52%;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 34%);
          mask-image:linear-gradient(to right,transparent 0%,#000 34%);
}
/* La portada horizontal trae los sujetos a la derecha y crema a la izquierda:
   el recorte se ancla a la derecha para no cortarlos, y el crema queda del
   lado donde la mascara funde la foto con el fondo. */
.nyd-hero-foto img{ width:100%; height:100%; object-fit:cover; object-position:right center; display:block; }

/* Reloj: el dato que resume el artículo. Va en la zona crema, ANTES de que
   empiece la foto — encima de la imagen se perdía y el «30 min» quedaba medio
   tapado por el borde. */
.nyd-hero-reloj{
  position:absolute; z-index:3; left:47%; top:12%;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.nyd-reloj-svg{ width:112px; height:112px; filter:drop-shadow(0 6px 16px rgba(95,100,109,.12)); }
/* Rayitas de destello a la derecha del reloj, como en el diseño de referencia. */
.nyd-hero-reloj::after{
  content:""; position:absolute; right:-26px; top:34px; width:18px; height:26px;
  background:
    linear-gradient(var(--nyd-salvia),var(--nyd-salvia)) left 0    top 0   /14px 2px no-repeat,
    linear-gradient(var(--nyd-salvia),var(--nyd-salvia)) left 2px  top 11px/16px 2px no-repeat,
    linear-gradient(var(--nyd-salvia),var(--nyd-salvia)) left 0    top 22px/14px 2px no-repeat;
  border-radius:2px; opacity:.7; transform:rotate(-8deg);
}
.nyd-hero-dato{
  font-family:"Caveat", cursive; font-size:26px; font-weight:600; color:var(--nyd-salvia);
}

/* Sin imagen destacada el encabezado sigue funcionando, solo con el texto. */
.nyd-hero--sin-foto .nyd-hero-inner{ min-height:0; padding-bottom:48px; }

@media (max-width:900px){
  .nyd-hero-inner{ flex-direction:column-reverse; align-items:stretch; padding:0 0 36px; min-height:0; }
  .nyd-hero-texto{ max-width:none; padding:28px 24px 0; }
  .nyd-hero-foto{
    position:relative; width:100%; height:300px;
    -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);
  }
  /* El rótulo es más ancho que el reloj y se salía por el borde; las rayitas
     de destello lo empujaban todavía más, así que en móvil no se pintan. */
  /* En móvil el reloj queda SOBRE la foto y el rótulo se perdía contra las
     zonas claras: se le pone un respaldo translúcido para que siempre lea.
     Las rayitas de destello no se pintan, no caben. */
  /* Con la portada horizontal el crema queda a la IZQUIERDA del recorte: ahi va
     el reloj, para no taparle la cara a la mama. */
  .nyd-hero-reloj{
    left:16px; right:auto; top:18px;
    background:rgba(255,255,255,.72); backdrop-filter:blur(4px);
    border-radius:20px; padding:10px 14px 8px;
  }
  .nyd-hero-reloj::after{ display:none; }
  .nyd-reloj-svg{ width:70px; height:70px; }
  .nyd-hero-dato{ font-size:20px; }
}

/* En la entrada, el título ya lo muestra la portada: el de Astra sobraría.
   Ojo con el selector: `ast-single-post` es clase del <body>, no del artículo,
   así que encadenarla con .entry-title no casa con nada. */
.single-post .entry-header .entry-title{ display:none; }
.single-post .entry-header{ margin-bottom:8px; }