/* =====================================================================
   Casa La Nicia - capa de tema sobre styles.css
   Paleta: blanco y negro. Se carga despues de styles.css y solo
   actua dentro de <body class="theme-nicia">.
   ===================================================================== */

.theme-nicia{
  /* la escala "brown" de styles.css pasa a grises */
  --brown-900:#000000;
  --brown-800:#111111;
  --brown-700:#262626;
  --brown-600:#111111;   /* principal: negro */
  --brown-500:#5C5C5C;
  --brown-400:#8C8C8C;
  --brown-200:#D6D6D6;
  --brown-100:#EBEBEB;

  --cream:#F4F4F4;
  --cream-2:#EAEAEA;

  /* los acentos dorados pasan a blanco (sobre negro) y negro (sobre blanco) */
  --gold:#FFFFFF;
  --gold-deep:#111111;
  --bar:#000000;

  --text:#111111;
  --text-soft:#575757;

  --shadow-sm:0 2px 10px rgba(0,0,0,.08);
  --shadow-md:0 12px 40px rgba(0,0,0,.14);
  --shadow-lg:0 26px 70px rgba(0,0,0,.26);
}

/* ---------------------------------------------------------------------
   Botones: negro sobre blanco; al pasar el raton se invierten
   --------------------------------------------------------------------- */
.theme-nicia .btn:hover{background:var(--white);color:#111;border-color:#111;}
.theme-nicia .btn:focus-visible{outline-color:#111;}

.theme-nicia .btn--ghost:hover{background:#111;color:var(--white);}

.theme-nicia .btn--light:hover{background:transparent;color:var(--white);border-color:var(--white);}
.theme-nicia .btn--outline-light:hover{background:var(--white);color:#000;border-color:var(--white);}

.theme-nicia .btn--gold{background:var(--white);color:#000;border-color:var(--white);}
.theme-nicia .btn--gold:hover{background:transparent;color:var(--white);border-color:var(--white);}

.theme-nicia .header .btn:focus-visible,
.theme-nicia .nav .btn:focus-visible,
.theme-nicia .hero .btn:focus-visible,
.theme-nicia .cta .btn:focus-visible{outline-color:var(--white);}

/* ---------------------------------------------------------------------
   Cabecera
   --------------------------------------------------------------------- */
.theme-nicia .header{border-bottom-color:rgba(255,255,255,.12);}
.theme-nicia .nav a:hover{color:rgba(255,255,255,.72);}
.theme-nicia .burger{border-color:rgba(255,255,255,.4);}

/* el logo de La Nicia ocupa el lugar del retrato de Pichote */
.brand__nicia{
  width:auto;height:52px;flex:none;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.brand:hover .brand__nicia{transform:translateY(-1px) scale(1.04);}

.n-back-ico{width:15px;height:15px;flex:none;}

/* ---------------------------------------------------------------------
   Hero: foto aerea en blanco y negro
   --------------------------------------------------------------------- */
.n-hero .hero__media{background:#000;}
.n-hero .hero__media img{
  object-position:center 70%;
  filter:grayscale(1) contrast(1.08);
}
.n-hero .hero__veil{
  background:
    radial-gradient(ellipse at center,rgba(0,0,0,.52) 0%,rgba(0,0,0,.74) 70%),
    linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.2) 40%,rgba(0,0,0,.72) 100%);
}

.n-hero__inner{max-width:780px;margin-inline:auto;text-align:center;}
.n-hero__logo{
  width:min(440px,84%);height:auto;
  margin-inline:auto;
  filter:drop-shadow(0 12px 44px rgba(0,0,0,.6));
}
.n-hero .hero__fact{color:rgba(255,255,255,.74);}
.n-hero__actions{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
  margin-top:36px;
}

/* ---------------------------------------------------------------------
   La casa
   --------------------------------------------------------------------- */
.theme-nicia .split__badge{background:#000;}
.theme-nicia .split__badge span{color:rgba(255,255,255,.72);}
#casa-title{font-size:clamp(2.2rem,3.4vw,2.8rem);}

/* ---------------------------------------------------------------------
   Seccion oscura: el cachopo
   --------------------------------------------------------------------- */
.n-dark{background:#000;color:var(--white);}
.n-dark .eyebrow{color:rgba(255,255,255,.62);}
.n-dark .eyebrow::before,
.n-dark .eyebrow::after{background:var(--white);}
.n-dark .section__title{color:var(--white);}
.n-dark .section__text{color:rgba(255,255,255,.74);}

.n-cachopo{
  display:grid;grid-template-columns:1.25fr .75fr;
  gap:80px;align-items:center;
}

.n-ingredients{
  list-style:none;margin:36px 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid rgba(255,255,255,.16);
}
.n-ingredients li{
  display:flex;align-items:baseline;gap:14px;
  padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,.16);
  font-family:var(--ff-cond);font-size:1.02rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
}
.n-ingredients li:nth-child(odd){padding-right:20px;}
.n-ingredients b{
  font-family:var(--ff-title);font-size:1rem;font-weight:600;
  letter-spacing:0;color:rgba(255,255,255,.5);min-width:24px;
}

/* tarjeta del premio: marco blanco con filete interior */
.n-award{
  position:relative;
  padding:46px 34px 40px;
  border:1px solid rgba(255,255,255,.8);
  text-align:center;
}
.n-award::before{
  content:"";position:absolute;inset:8px;
  border:1px solid rgba(255,255,255,.22);
  pointer-events:none;
}
.n-award__rule{
  display:block;position:relative;
  width:56px;height:1px;background:var(--white);
  margin:0 auto 24px;
}
.n-award__rule::after{
  content:"";position:absolute;left:50%;top:50%;
  width:6px;height:6px;background:var(--white);
  transform:translate(-50%,-50%) rotate(45deg);
}
.n-award__rule:last-child{margin:26px auto 0;}
.n-award__kicker{
  margin:0 0 6px;
  font-size:.66rem;font-weight:700;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(255,255,255,.62);
}
.n-award__num{
  margin:0;
  font-family:var(--ff-title);font-size:clamp(5rem,9vw,7rem);
  font-weight:600;line-height:1;
}
.n-award__title{
  margin:4px 0 12px;
  font-family:var(--ff-cond);font-size:1.4rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
}
.n-award__text{
  margin:0 auto;max-width:28ch;
  font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.74);
}

/* enlace a la carta de Pichote */
.n-crosslink{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px 30px;
  margin-top:72px;padding-top:28px;
  border-top:1px solid rgba(255,255,255,.16);
}
.n-crosslink p{margin:0;color:rgba(255,255,255,.74);font-size:.98rem;}
.n-crosslink strong{color:var(--white);font-weight:600;}
.n-crosslink__btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 18px;
  border:1px solid rgba(255,255,255,.6);
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.n-crosslink__btn:hover{background:var(--white);color:#000;border-color:var(--white);}
.n-crosslink__btn:focus-visible{outline:2px solid var(--white);outline-offset:3px;}
.n-crosslink__btn svg{width:14px;height:14px;flex:none;}

/* ---------------------------------------------------------------------
   Panoramica del comedor, a todo el ancho
   --------------------------------------------------------------------- */
.n-panorama{
  position:relative;margin:0;
  height:clamp(300px,46vw,620px);
  overflow:hidden;background:#000;
}
.n-panorama img{width:100%;height:100%;object-fit:cover;object-position:center 55%;}
.n-panorama::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.66) 100%);
  pointer-events:none;
}
.n-panorama figcaption{
  position:absolute;left:0;right:0;bottom:26px;z-index:1;
  color:var(--white);
  font-family:var(--ff-title);font-size:clamp(1.1rem,1.8vw,1.4rem);font-style:italic;
}

/* ---------------------------------------------------------------------
   Galeria en mosaico
   --------------------------------------------------------------------- */
.n-mosaic{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  grid-template-rows:290px 290px;
  gap:18px;
}
.n-mosaic__item{
  position:relative;margin:0;overflow:hidden;
  background:var(--brown-100);
  box-shadow:var(--shadow-sm);
}
.n-mosaic__item--aereo{grid-row:1 / span 2;}
.n-mosaic__item--comedor{grid-column:2 / span 2;}
.n-mosaic__item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
.n-mosaic__item:hover img{transform:scale(1.04);}
.n-mosaic__item figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:30px 18px 14px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72));
  color:var(--white);
  font-family:var(--ff-cond);font-size:.82rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}

/* ---------------------------------------------------------------------
   Visitanos, CTA y pie
   --------------------------------------------------------------------- */
.theme-nicia .map iframe{filter:grayscale(1) contrast(1.05);}
.theme-nicia .info-block a:hover{color:#000;}

.n-social{display:flex;flex-wrap:wrap;gap:6px 22px;}

.theme-nicia .cta{background:#000;}
.theme-nicia .cta__bg img{filter:grayscale(1);}
.theme-nicia .cta::after{
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0)   calc(100% - 230px),
      rgba(0,0,0,.35) calc(100% - 140px),
      rgba(0,0,0,.8)  calc(100% - 58px),
      #000            100%),
    linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.66));
}
.theme-nicia .cta h2,
.theme-nicia .cta p{text-shadow:0 2px 18px rgba(0,0,0,.55);}

.theme-nicia .footer{background:#000;}
.theme-nicia .footer h4{color:rgba(255,255,255,.55);}
.theme-nicia .footer__brand img{width:170px;}
.n-footer-link{color:var(--white);border-bottom:1px solid rgba(255,255,255,.35);}
.n-footer-link:hover{border-bottom-color:var(--white);}

.theme-nicia .mobile-fab{box-shadow:0 10px 26px rgba(0,0,0,.34);}
.theme-nicia .mobile-fab--tel{background:#000;border-color:rgba(255,255,255,.4);}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width:1080px){
  .n-cachopo{grid-template-columns:1fr;gap:50px;}
  .n-award{max-width:440px;width:100%;margin-inline:auto;}
}

/* tablet: el bloque del cachopo y el enlace a la carta, centrados */
@media (min-width:721px) and (max-width:1080px){
  .n-cachopo > :first-child{max-width:640px;margin-inline:auto;text-align:center;}
  .n-cachopo .eyebrow::after{content:"";width:34px;height:1px;background:var(--white);}
  .n-ingredients{text-align:left;}
  .n-crosslink{flex-direction:column;justify-content:center;text-align:center;}
  .n-social{justify-content:center;}
}

@media (max-width:1180px){
  .theme-nicia .nav{background:#000;border-left-color:rgba(255,255,255,.14);}
  .theme-nicia .nav__actions .btn--gold{color:#000;}
  .brand__nicia{height:44px;}
}

@media (max-width:720px){
  .n-hero__logo{width:min(300px,82%);}
  .n-hero__actions{display:grid;gap:12px;max-width:340px;margin:28px auto 0;}
  .n-hero__actions .btn{width:100%;}
  .n-hero .hero__veil{background:linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,.84));}

  .n-ingredients{grid-template-columns:1fr;}
  .n-ingredients li:nth-child(odd){padding-right:0;}
  .n-award{padding:38px 22px 32px;}

  .n-crosslink{flex-direction:column;align-items:stretch;text-align:center;margin-top:52px;}
  .n-crosslink__btn{justify-content:center;}

  .n-panorama figcaption{bottom:18px;}

  .n-mosaic{
    grid-template-columns:1fr 1fr;
    grid-template-rows:none;
    grid-auto-rows:180px;
    gap:12px;
  }
  .n-mosaic__item--aereo{grid-row:span 2;grid-column:1 / -1;}
  .n-mosaic__item--comedor{grid-column:1 / -1;}
  .n-mosaic__item figcaption{padding:24px 12px 10px;font-size:.7rem;letter-spacing:.1em;}

  .theme-nicia .footer__brand img{width:150px;}
}

@media (max-width:720px) and (max-height:700px){
  .n-hero__logo{width:min(230px,70%);}
  .n-hero__actions{margin-top:20px;}
}