/*
  custom-fix.css
  Stand-in stylesheet for Pan Caliente 24 Horas.
  The site's real compiled stylesheet (/_astro-1753983110265/_slug_.9Y8c36DB.css),
  produced by the Zyro/Hostinger website-builder export, is missing on the server -
  404 both locally and on the live site, and there is zero Wayback Machine capture
  of it or any other asset under this domain (checked via the CDX API). It is a
  proprietary per-site build output, not a redistributable open-source theme, so it
  cannot legitimately be re-downloaded from anywhere.
  This file re-styles the EXISTING markup/classes from scratch using only the
  page's own already-declared CSS custom properties (colors from the :root block
  in index.html's inline <style>, and the per-element --block-padding /
  --fontSizeDesktop / button color / icon color variables the builder already
  writes inline on each element) so the result uses the site's real brand palette
  and real per-element settings wherever those are recoverable.
  NOT the original design: the real stylesheet drove a CSS-Grid layout positioned
  by matching --grid-row/--grid-column coordinates on every element (still present
  inline, but meaningless without the grid engine that consumed them). Recreating
  that multi-column composition exactly is not possible without the original file,
  so this replacement instead stacks each block's content in a simple, responsive
  single-column flow - correct reading order and content, different composition.
  Replace this file once the owner republishes from Zyro/Hostinger.
*/

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Inter', Arial, sans-serif;
  color:var(--color-dark);
  background:var(--color-light);
  line-height:1.55;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Outfit', Arial, sans-serif;
  font-weight:600;
  margin:0 0 16px;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* ===== Page shell ===== */
.page{ overflow-x:hidden; }
.page__blocks{ display:flex; flex-direction:column; }

/* ===== Header ===== */
.block-header{
  position:sticky; top:0; z-index:1000;
  isolation:isolate;
}
.block-header .background{
  position:absolute; inset:0; z-index:0;
  background:var(--background-color,#fff);
  box-shadow:0 1px 8px rgba(0,0,0,.08);
}
.block-header-layout-desktop,
.block-header-layout-mobile{
  position:relative; z-index:1;
  max-width:1200px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.block-header-layout-desktop{ display:none; }
.block-header-logo__image{ display:flex; align-items:center; color:var(--color-dark); }
.block-header-logo__image svg{ display:block; }

.block-header__nav-links{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.block-header-item{ display:flex; }
.block-header-item__label{
  display:block; padding:10px 14px; font-weight:500; font-size:15px;
  color:var(--nav-link-text-color, var(--color-dark));
}
.item-content-wrapper--active .block-header-item__label,
.block-header-item__label:hover{ color:var(--color-primary); }

/* Mobile burger */
.burger{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:38px; height:38px; padding:0; background:none; border:none; cursor:pointer;
}
.burger__bun, .burger__meat{
  display:block; width:24px; height:2px; background:var(--color-dark); border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.block-header-layout-mobile{ position:relative; }
.block-header-layout-mobile .block-header__nav{
  position:absolute; top:100%; left:0; right:0;
  background:var(--color-light);
  box-shadow:0 8px 16px rgba(0,0,0,.12);
  max-height:0; overflow:hidden;
  transition:max-height .25s ease;
}
.block-header-layout-mobile.is-open .block-header__nav{ max-height:70vh; overflow-y:auto; }
.block-header-layout-mobile .block-header__nav-links{
  flex-direction:column; align-items:stretch; padding:8px 24px 16px;
}
.block-header-layout-mobile.is-open .burger__bun:first-child{ transform:translateY(7px) rotate(45deg); }
.block-header-layout-mobile.is-open .burger__meat{ opacity:0; }
.block-header-layout-mobile.is-open .burger__bun:last-child{ transform:translateY(-7px) rotate(-45deg); }

@media (min-width: 811px){
  .block-header-layout-desktop{ display:flex; }
  .block-header-layout-mobile{ display:none; }
}

/* ===== Blocks / sections ===== */
.block{
  position:relative;
  padding:var(--block-padding, 60px 0);
}
.block--footer{ background:var(--color-dark); color:var(--color-light); }

.block-background{ position:relative; }
.block-background--fixed{ overflow:hidden; }
.block-background__image{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.block-background__overlay{
  position:absolute; inset:0; z-index:1;
  background:rgba(13,20,26,.45);
}
.block-background .block-layout{ position:relative; z-index:2; }
.block--footer .block-background{ position:static; }

/* ===== Layout / content flow (stand-in for the missing CSS-Grid engine) ===== */
.block-layout{
  max-width:1200px; margin:0 auto; padding:0 24px;
  display:flex; flex-direction:column; gap:8px;
  width:100%;
}
.layout-element{
  width:100%;
  text-align:var(--text, left);
  margin:0 0 var(--m-element-margin, 24px) 0;
}
.layout-element:last-child{ margin-bottom:0; }
.layout-element[style*="--align:center"],
.layout-element[style*="--justify:center"]{ align-self:center; }

/* Headings pick up the builder's own inline --fontSizeDesktop/--lineHeightDesktop
   vars where present; the mobile media query below scales them down since the
   page never supplies a --fontSizeMobile counterpart. */
h1{ font-size:var(--fontSizeDesktop, 44px); line-height:var(--lineHeightDesktop, 1.15); }
h2{ font-size:var(--fontSizeDesktop, 34px); line-height:var(--lineHeightDesktop, 1.2); }
h3{ font-size:var(--fontSizeDesktop, 28px); line-height:var(--lineHeightDesktop, 1.25); }
h4{ font-size:var(--fontSizeDesktop, 22px); line-height:var(--lineHeightDesktop, 1.3); }
h5{ font-size:var(--fontSizeDesktop, 19px); line-height:var(--lineHeightDesktop, 1.3); }
h6{ font-size:var(--fontSizeDesktop, 16px); line-height:var(--lineHeightDesktop, 1.35); }

@media (max-width: 810px){
  h1{ font-size:calc(var(--fontSizeDesktop, 44px) * 0.62); }
  h2{ font-size:calc(var(--fontSizeDesktop, 34px) * 0.68); }
  h3{ font-size:calc(var(--fontSizeDesktop, 28px) * 0.75); }
  .block{ padding:var(--m-block-padding, 32px 16px); }
  .block-layout{ padding:0 16px; }
}

.text-box p{ margin:0 0 12px; }
.text-box p:last-child{ margin-bottom:0; }
.body{ font-size:16px; }
.body-large{ font-size:19px; }
.body-small{ font-size:14px; color:var(--color-gray); }

/* ===== Buttons (colors come from the builder's own inline vars) ===== */
.grid-button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 30px; margin-top:8px;
  font-weight:600; font-size:var(--font-size-desktop, 16px);
  cursor:pointer; text-align:center;
  background:var(--background-color, var(--color-primary));
  color:var(--font-color, #fff);
  border:var(--border-width, 1px) solid var(--border-color, transparent);
  border-radius:var(--border-radius, 8px);
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.grid-button:hover{
  background:var(--background-color-hover, var(--color-primary-dark));
  color:var(--font-color-hover, #fff);
  border-color:var(--border-color-hover, transparent);
}
.form__button{ width:100%; }

/* ===== Forms ===== */
.form__control{
  display:flex; flex-direction:column; gap:var(--formSpacing, 16px);
  max-width:480px;
}
.input{ display:flex; flex-direction:column; gap:6px; text-align:left; }
.input__label,
.input__label--light{ font-size:14px; font-weight:500; color:var(--color-gray-dark); }
.block--footer .input__label,
.block--footer .input__label--light{ color:var(--color-light); }
.input__component,
.input__component--light{
  width:100%; padding:12px 14px;
  border:1px solid var(--color-gray-border);
  border-radius:8px; font-size:15px; font-family:inherit;
  background:#fff; color:var(--color-dark);
}
.input__component--textarea{ min-height:110px; resize:vertical; }

/* ===== Images ===== */
.image-wrapper{ position:relative; width:100%; }
.image--grid{ width:100%; border-radius:12px; overflow:hidden; }
.image--grid .image__image{ width:100%; height:100%; object-fit:cover; display:block; }
.image-wrapper--desktop{ display:block; }
.image-wrapper--mobile{ display:none; }
@media (max-width: 810px){
  .image-wrapper--desktop{ display:none; }
  .image-wrapper--mobile{ display:block; }
}

/* ===== Footer ===== */
.block--footer a{ color:var(--color-light); }
.social-icons{ list-style:none; margin:0; padding:0; }
.social-icons--row{
  display:flex; gap:var(--space-between-icons, 20px); flex-wrap:wrap;
}
.social-icons__link{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--icon-size, 24px); height:var(--icon-size, 24px);
  color:var(--icon-color, var(--color-light));
}
.social-icons__link:hover{ color:var(--icon-color-hover, var(--color-primary-light)); }
.social-icons__link svg{ width:100%; height:100%; }

/* ===== Missing-image fallback (belt-and-braces; the page's own <img> tags are
   all hosted on images.unsplash.com and load fine, but this keeps any future
   broken src from showing the raw broken-image icon instead of a neutral box) ===== */
img.img-fallback{
  background:#e9edee no-repeat center/40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23aab4b8'%3E%3Cpath d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E");
}