/* ===========================================================
   Casa Encanto de Melgar — complementos del blog
   Se carga DESPUÉS de assets/css/style.css y usa sus mismas variables.
   El archivo original del sitio no se modifica nunca.
   Casi todo aquí solo AÑADE lo que faltaba (tablas, figuras, avisos, aves).
   Lo único que ajusta son los fondos de las secciones dentro del blog,
   que pasan a ser semitransparentes para dejar ver el dibujo de la casa.
   =========================================================== */

/* Fecha y tiempo de lectura bajo el título */
.post-meta{
  font-size:.86rem;color:var(--text-muted);margin:10px 0 0;
}

/* Foto de portada del artículo: banda baja, para no obligar a hacer scroll */
.post-hero{margin:20px 0 0}
.post-hero img{
  width:100%;aspect-ratio:2.6/1;max-height:310px;object-fit:cover;
  border:1px solid var(--border-light);border-radius:var(--radius-md);
}
/* Fotos de menor resolución: se muestran pequeñas, nunca estiradas */
.post-hero--peq{max-width:420px;margin:20px auto 0}
.post-hero--peq img{aspect-ratio:auto;max-height:380px;width:auto;margin:0 auto}
@media (max-width:640px){
  .post-hero img{aspect-ratio:2.2/1;max-height:200px}
  .post-hero--peq{max-width:300px}
}

/* ─── Cuerpo del artículo ─── */
/* Ancho de lectura cómodo. El artículo conserva la tarjeta de .blog-article del sitio. */
.container--post{max-width:900px}
.blog-article.post h2{
  font-size:clamp(1.35rem,2.6vw,1.85rem);margin:1.9em 0 .5em;
}
.blog-article.post h2:first-child{margin-top:0}
.blog-article.post h3{margin:1.6em 0 .4em}
.blog-article.post p{margin:0 0 1.1em;line-height:1.75}
.blog-article.post ul,
.blog-article.post ol{margin:0 0 1.3em;padding-left:1.25em;line-height:1.75}
.blog-article.post li{margin:.4em 0}
.blog-article.post a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--btn-3);text-decoration-thickness:2px;text-underline-offset:3px}
.blog-article.post a:hover{color:var(--rausch);text-decoration-color:var(--rausch)}

.blog-article.post .lead{
  font-size:1.1rem;line-height:1.7;color:var(--text-secondary);margin-bottom:1.5em;
}

/* Avisos dentro del texto */
.tip,.destacado{
  padding:18px 22px;margin:1.9em 0;font-size:.97rem;line-height:1.7;
  color:var(--text-secondary);border-radius:0 var(--radius-md) var(--radius-md) 0;
}
.tip{background:var(--bg-light);border:1px solid var(--border-light);border-left:4px solid var(--btn-1)}
.destacado{background:#FFF3F5;border:1px solid #FFE0E6;border-left:4px solid var(--rausch)}
.tip strong,.destacado strong{color:var(--ink)}

/* Figuras */
.blog-article.post figure{margin:2.2em 0}
.blog-article.post figure img{
  width:100%;border-radius:var(--radius-md);border:1px solid var(--border-light);
}
.blog-article.post figcaption{
  font-size:.86rem;color:var(--text-muted);text-align:center;margin-top:10px;line-height:1.5;
}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.duo img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:var(--radius-md);border:1px solid var(--border-light)}
@media (max-width:640px){.duo{grid-template-columns:1fr}}

/* Tablas */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.8em 0}
.tabla{
  width:100%;border-collapse:collapse;background:var(--white);
  border:1px solid var(--border-light);border-radius:var(--radius-md);
  overflow:hidden;font-size:.93rem;
}
.tabla th{
  background:var(--bg-light);color:var(--text-secondary);text-align:left;
  padding:13px 15px;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;
  font-weight:700;border-bottom:1px solid var(--border-light);
}
.tabla td{padding:13px 15px;border-top:1px solid var(--border-light);vertical-align:top;line-height:1.6}
.tabla tr:hover td{background:#FCFCFC}
.tabla .si{color:var(--btn-1);font-weight:700}
.tabla .no{color:var(--text-muted)}
.pill{display:inline-block;background:var(--white);color:var(--ink);border:1px solid var(--border);border-radius:999px;padding:3px 11px;font-size:.76rem;font-weight:600}
.pill.verde{border-color:var(--btn-3);background:#FFF8F0;color:var(--btn-1-dark)}

/* Nota bajo el botón de las llamadas a la acción */
.cta-nota{margin-top:14px;font-size:.85rem;color:var(--text-muted)}

/* ─── Tarjetas de la portada del blog ───
   Rejilla fija de 4 / 2 / 1 columnas: los grupos son de 4, así nunca queda
   una fila incompleta. Todas las tarjetas miden exactamente lo mismo. */
/* Bloques de guías más compactos: antes había 128 px entre secciones. */
.seccion-guias{padding:34px 0 38px}
.seccion-guias h2{margin:2px 0 6px}
.seccion-guias .lede{margin:0;max-width:760px}

.attraction-grid.blog-cards{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;margin-top:18px;
}
@media (max-width:1000px){.attraction-grid.blog-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.attraction-grid.blog-cards{grid-template-columns:minmax(0,1fr)}}

.blog-cards .attraction-card{display:flex;flex-direction:column;height:100%}
.card-foto{display:block;overflow:hidden}
.card-foto img{width:100%;height:150px;object-fit:cover;transition:transform .35s ease}
.blog-cards .attraction-card:hover .card-foto img{transform:scale(1.05)}
.blog-cards .attraction-card__body{
  padding:14px 16px 18px;display:flex;flex-direction:column;flex:1;
}
.attraction-card h3{margin:6px 0 7px;font-size:.98rem;line-height:1.32}
.attraction-card h3 a{color:var(--ink);text-decoration:none}
.attraction-card h3 a:hover{color:var(--rausch)}
.attraction-card__body p{
  font-size:.84rem;color:var(--text-secondary);line-height:1.55;margin:0 0 12px;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.post-mas{margin-top:auto;font-weight:600;font-size:.85rem;color:var(--btn-1);text-decoration:none}
.post-mas:hover{color:var(--btn-1-dark);text-decoration:underline}
@media (max-width:560px){.card-foto img{height:180px}}

/* ─── Fondo suave en TODA la página del blog ───
   El dibujo a lápiz de la casa, completo y sin recortar, queda fijo detrás
   de todo mientras el contenido se desliza por encima. Las secciones se
   vuelven semitransparentes para dejarlo ver, y siguen legibles. */
html{background:var(--white)}
body{background:transparent}
body::before{
  content:"";position:fixed;inset:0;z-index:-10;background:var(--white);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-9;
  background:url(../img/fondo-dibujo-casa-encanto.jpg) center center / contain no-repeat;
  opacity:.24;
}
@media (max-width:820px){
  body::after{background-size:cover;opacity:.16}
}

/* Capas del sitio, ahora translúcidas para que se vea el dibujo */
.site-header{background:rgba(255,255,255,.93)}
.section--cream-dark{background:rgba(247,247,247,.66)}
.section--navy{background:rgba(247,247,247,.66)}
.section--pool{background:rgba(255,255,255,.60)}
.site-footer{background:rgba(247,247,247,.88)}
.attraction-card,.blog-article,.faq-item,.card,.tabla,.contact-card{
  background:rgba(255,255,255,.93);
}
.ia-summary{background:rgba(247,247,247,.80)}
.tip{background:rgba(247,247,247,.85)}

.blog-portada{
  min-height:clamp(240px,26vw,360px);
  display:flex;align-items:center;
}
.blog-portada .container{width:100%}

/* ─── Aves: pasa una distinta cada 10 segundos, en diagonal ───
   Ciclo de 50 s por ave, visible unos 8 s, escalonadas de a 10 s. */
.ave{
  position:fixed;left:0;top:0;height:auto;
  z-index:2;pointer-events:none;opacity:0;overflow:visible;
  will-change:transform,opacity;
}

/* El aleteo. Cada especie bate las alas a su propio ritmo. */
.ave .ala,.ave .ala2{transform-box:view-box}
.ave .ala{animation:aletea .5s ease-in-out infinite alternate}
@keyframes aletea{from{transform:rotate(-22deg)}to{transform:rotate(24deg) scaleY(.96)}}

.ave-guacamaya .ala{transform-origin:124px 68px}
.ave-loro      .ala{transform-origin:124px 68px;animation-duration:.44s}
.ave-azulejo   .ala{transform-origin:126px 68px;animation-duration:.34s}
.ave-garza     .ala{transform-origin:120px 66px;animation-duration:1.05s}

/* El colibrí tiene dos alas que se cruzan, y bate muchísimo más rápido */
.ave-colibri .ala {transform-origin:130px 66px;animation:aletea-colibri .09s ease-in-out infinite alternate}
.ave-colibri .ala2{transform-origin:130px 70px;animation:aletea-colibri2 .09s ease-in-out infinite alternate}
@keyframes aletea-colibri {from{transform:rotate(-38deg)}to{transform:rotate(18deg)}}
@keyframes aletea-colibri2{from{transform:rotate(30deg)} to{transform:rotate(-12deg)}}

@media (prefers-reduced-motion:reduce){.ave .ala,.ave .ala2{animation:none}}
.ave-guacamaya{width:104px;animation:vuela-guacamaya 50s linear infinite}
.ave-loro     {width:88px; animation:vuela-loro      50s linear infinite;animation-delay:-40s}
.ave-azulejo  {width:72px; animation:vuela-azulejo   50s linear infinite;animation-delay:-30s}
.ave-colibri  {width:56px; animation:vuela-colibri   50s linear infinite;animation-delay:-20s}
.ave-garza    {width:116px;animation:vuela-garza     50s linear infinite;animation-delay:-10s}

/* Ninguna vuela recto: todas suben y bajan en vaivén mientras avanzan,
   y se inclinan hacia arriba al remontar y hacia abajo al caer. */

/* sube en diagonal, con ondas amplias */
@keyframes vuela-guacamaya{
  0%   {transform:translate3d(-18vw,82vh,0) rotate(-6deg);opacity:0}
  1.2% {opacity:.95}
  2%   {transform:translate3d(2vw,70vh,0)  rotate(-15deg)}
  4%   {transform:translate3d(16vw,68vh,0) rotate(-1deg)}
  6%   {transform:translate3d(30vw,56vh,0) rotate(-16deg)}
  8%   {transform:translate3d(44vw,54vh,0) rotate(-1deg)}
  10%  {transform:translate3d(58vw,41vh,0) rotate(-16deg)}
  12%  {transform:translate3d(72vw,38vh,0) rotate(-1deg)}
  14%  {transform:translate3d(88vw,23vh,0) rotate(-15deg)}
  14.8%{opacity:.95}
  16%  {transform:translate3d(116vw,14vh,0) rotate(-6deg);opacity:0}
  100% {transform:translate3d(116vw,14vh,0);opacity:0}
}
/* baja en diagonal, con ondas amplias */
@keyframes vuela-loro{
  0%   {transform:translate3d(-18vw,12vh,0) rotate(6deg);opacity:0}
  1.2% {opacity:.95}
  2%   {transform:translate3d(2vw,23vh,0)  rotate(16deg)}
  4%   {transform:translate3d(16vw,25vh,0) rotate(1deg)}
  6%   {transform:translate3d(30vw,36vh,0) rotate(16deg)}
  8%   {transform:translate3d(44vw,38vh,0) rotate(1deg)}
  10%  {transform:translate3d(58vw,50vh,0) rotate(16deg)}
  12%  {transform:translate3d(72vw,52vh,0) rotate(1deg)}
  14%  {transform:translate3d(88vw,65vh,0) rotate(15deg)}
  14.8%{opacity:.95}
  16%  {transform:translate3d(116vw,72vh,0) rotate(6deg);opacity:0}
  100% {transform:translate3d(116vw,72vh,0);opacity:0}
}
/* sube más empinado, ondas cortas */
@keyframes vuela-azulejo{
  0%   {transform:translate3d(-16vw,76vh,0) rotate(-8deg);opacity:0}
  1.2% {opacity:.95}
  2%   {transform:translate3d(4vw,63vh,0)  rotate(-19deg)}
  4%   {transform:translate3d(18vw,62vh,0) rotate(-2deg)}
  6%   {transform:translate3d(32vw,49vh,0) rotate(-19deg)}
  8%   {transform:translate3d(46vw,47vh,0) rotate(-2deg)}
  10%  {transform:translate3d(60vw,33vh,0) rotate(-19deg)}
  12%  {transform:translate3d(74vw,31vh,0) rotate(-2deg)}
  14%  {transform:translate3d(90vw,15vh,0) rotate(-17deg)}
  14.8%{opacity:.95}
  16%  {transform:translate3d(114vw,8vh,0) rotate(-8deg);opacity:0}
  100% {transform:translate3d(114vw,8vh,0);opacity:0}
}
/* rápido y nervioso, ondas muy cortas */
@keyframes vuela-colibri{
  0%   {transform:translate3d(-14vw,64vh,0) rotate(-8deg);opacity:0}
  1%   {opacity:.95}
  1.6% {transform:translate3d(6vw,54vh,0)  rotate(-18deg)}
  3%   {transform:translate3d(20vw,56vh,0) rotate(-1deg)}
  4.4% {transform:translate3d(34vw,45vh,0) rotate(-18deg)}
  5.8% {transform:translate3d(48vw,47vh,0) rotate(-1deg)}
  7.2% {transform:translate3d(62vw,36vh,0) rotate(-18deg)}
  8.6% {transform:translate3d(76vw,38vh,0) rotate(-1deg)}
  10%  {transform:translate3d(92vw,21vh,0) rotate(-16deg)}
  10.5%{opacity:.95}
  11.5%{transform:translate3d(112vw,16vh,0) rotate(-8deg);opacity:0}
  100% {transform:translate3d(112vw,16vh,0);opacity:0}
}
/* lenta y planeadora, ondas largas */
@keyframes vuela-garza{
  0%   {transform:translate3d(-20vw,8vh,0) rotate(4deg);opacity:0}
  1.5% {opacity:.9}
  3%   {transform:translate3d(4vw,21vh,0)  rotate(11deg)}
  6%   {transform:translate3d(22vw,24vh,0) rotate(2deg)}
  9%   {transform:translate3d(44vw,39vh,0) rotate(11deg)}
  12%  {transform:translate3d(66vw,44vh,0) rotate(2deg)}
  15%  {transform:translate3d(90vw,59vh,0) rotate(11deg)}
  16.5%{opacity:.9}
  18%  {transform:translate3d(118vw,66vh,0) rotate(4deg);opacity:0}
  100% {transform:translate3d(118vw,66vh,0);opacity:0}
}
@media (max-width:700px){
  .ave-guacamaya{width:70px}.ave-loro{width:60px}.ave-azulejo{width:50px}
  .ave-colibri{width:40px}.ave-garza{width:78px}
}
@media (prefers-reduced-motion:reduce){.ave{display:none}}
@media print{.ave{display:none}}

/* Resumen para asistentes de IA */
.ia-summary{
  background:var(--bg-light);border:1px dashed var(--border);
  border-radius:var(--radius-md);padding:22px 24px;
}
.ia-summary h2{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-muted);font-weight:700;margin:0 0 .7em;
}
.ia-summary p{font-size:.88rem;color:var(--text-secondary);line-height:1.75;margin:0}