/* ===========================================================================
   GCSHosteleria.es  ·  Hoja de estilos principal
   Paleta tomada del diseno base.
   =========================================================================== */

:root{
  --naranja:       #FD5E0F;
  --naranja-osc:   #E14E05;
  --naranja-claro: #FDECD3;
  --naranja-suave: #FFF4EA;
  --naranja-vivo:  #FF8A3D;

  --oscuro:        #1A1C1D;
  --oscuro-2:      #26292B;
  --oscuro-borde:  #33383B;

  --titular:       #111926;
  --texto:         #454D5E;
  --texto-suave:   #6B7382;

  --blanco:        #FFFFFF;
  --hueso:         #FAF7F4;
  --borde:         #E9E4DE;

  --radio:         14px;
  --radio-g:       20px;
  --sombra:        0 10px 30px rgba(17,25,38,.08);
  --sombra-g:      0 24px 60px rgba(17,25,38,.16);
  --ancho:         1520px;
  --trans:         .22s ease;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:80px; }

body{
  margin:0;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--texto);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; color:var(--titular); font-weight:700; line-height:1.15; letter-spacing:-.01em; }
p{ margin:0; }

.contenedor{ width:100%; max-width:var(--ancho); margin:0 auto; padding:0 24px; }

.ico{ width:22px; height:22px; flex:0 0 auto; }
.ico--fin{ width:16px; height:16px; opacity:.85; }

/* --- Botones ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px;
  border:2px solid transparent; border-radius:999px;
  font-weight:600; font-size:15px; line-height:1;
  cursor:pointer; transition:var(--trans);
  white-space:nowrap;
}
.btn span{ display:inline-block; }

.btn--naranja{
  background:var(--naranja); color:#fff;
  box-shadow:0 8px 20px rgba(253,94,15,.28);
}
.btn--naranja:hover{ background:var(--naranja-osc); transform:translateY(-2px); box-shadow:0 12px 26px rgba(253,94,15,.34); }

.btn--linea{ background:#fff; color:var(--titular); border-color:var(--borde); box-shadow:var(--sombra); }
.btn--linea:hover{ border-color:var(--naranja); color:var(--naranja); transform:translateY(-2px); }

.btn--linea-clara{ background:transparent; color:#fff; border-color:rgba(255,255,255,.28); }
.btn--linea-clara:hover{ border-color:var(--naranja); color:var(--naranja); }

.btn--grande{ padding:17px 28px; font-size:16.5px; }
.btn--ancho{ width:100%; justify-content:center; }

/* --- Antetitulos --------------------------------------------------------- */
.antetitulo{
  margin:0 0 10px;
  font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--naranja-vivo);
}
.antetitulo--naranja{ color:var(--naranja); }

/* --- Frase manuscrita ---------------------------------------------------- */
.frase-mano{
  font-family:'Caveat',cursive;
  font-size:34px; font-weight:700; line-height:1.15;
  color:var(--titular);
  transform:rotate(-4deg);
  position:relative;
  display:inline-block;
}
.frase-mano::after{
  content:''; position:absolute; left:6%; right:-4%; bottom:-10px;
  height:5px; border-radius:4px;
  background:var(--naranja);
  transform:rotate(1.5deg);
}

/* ===========================================================================
   1, 2, 3 · CABECERA
   =========================================================================== */
.cab{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid transparent;
  transition:var(--trans);
}
.cab.es-fijo{ border-bottom-color:var(--borde); box-shadow:0 4px 18px rgba(17,25,38,.06); }

.cab__in{ display:flex; align-items:center; gap:28px; min-height:72px; }

.cab__logo img{ width:auto; height:46px; }

.cab__nav{ margin-left:auto; }
.cab__nav ul{ display:flex; align-items:center; gap:30px; }
.cab__nav a{
  position:relative;
  font-size:15px; font-weight:500; color:var(--titular);
  padding:6px 0;
  transition:var(--trans);
}
.cab__nav a:hover{ color:var(--naranja); }
.cab__nav a.es-activo{ color:var(--naranja); font-weight:600; }
.cab__nav a.es-activo::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px;
  height:2px; border-radius:2px; background:var(--naranja);
}
.cab__nav-cta{ display:none; }

.cab__cta{ flex:0 0 auto; }

.cab__burger{
  display:none;
  width:44px; height:40px; padding:9px 8px;
  background:none; border:1px solid var(--borde); border-radius:10px;
  flex-direction:column; justify-content:space-between; cursor:pointer;
}
.cab__burger span{ display:block; height:2px; border-radius:2px; background:var(--titular); transition:var(--trans); }
.cab__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.cab__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.cab__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* ===========================================================================
   4, 5, 6 · HERO
   =========================================================================== */
.hero{ position:relative; overflow:hidden; padding:26px 0 24px; }

.hero__fondo{
  position:absolute; inset:0; z-index:0;
  background-image:url('../img/fondo-hero.jpg');
  background-size:cover;
  background-position:center 55%;
}
/* Velo que aclara la foto para que el texto sea legible, como en el diseno */
.hero__fondo::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(95deg,
      rgba(255,252,247,.95) 0%,
      rgba(255,250,244,.88) 20%,
      rgba(255,247,238,.66) 34%,
      rgba(255,244,232,.34) 48%,
      rgba(255,242,228,.15) 62%,
      rgba(255,241,226,.10) 78%,
      rgba(255,241,226,.18) 100%),
    linear-gradient(to bottom, rgba(255,252,248,.26) 0%, rgba(255,250,244,0) 40%, rgba(28,22,16,.14) 100%);
}

.hero__in{
  position:relative; z-index:1;
  display:grid; gap:28px;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr) 220px;
  align-items:center;
}

/* Bloque 4: el logo del hero va en horizontal (simbolo + texto), no apilado */
.hero__logo{
  display:flex; align-items:center; gap:14px;
  margin:0 0 14px;
}
/* en % para que el conjunto nunca desborde su columna */
.hero__logo img:first-child{ width:21%; max-width:92px; height:auto; flex:0 0 auto; }
.hero__logo img:last-child{ width:71%; max-width:330px; height:auto; flex:0 1 auto; min-width:0; }

.hero h1{ font-size:clamp(30px,3.2vw,46px); font-weight:800; }

.hero__sub{ margin:12px 0 18px; font-size:clamp(15px,1.1vw,17px); color:var(--texto); }

.hero__botones{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px; }

.hero__checks{ display:flex; flex-wrap:wrap; gap:10px 20px; }
.hero__checks li{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--titular); white-space:nowrap; }
.hero__checks .ico{ width:20px; height:20px; color:var(--titular); }

.hero__medios{ display:contents; }

.hero__tpv{ margin:0; }
.hero__tpv img{
  /* el TPV desborda un poco su columna: es un objeto sobre la foto, no una caja */
  width:110%; max-width:none; margin-left:-5%;
  /* sombra que sigue la silueta del recorte */
  filter:drop-shadow(0 18px 24px rgba(10,14,20,.45));
}

.hero__ambiente{
  margin:0;
  display:flex; flex-direction:column; align-items:center;
  /* la frase va arriba a la derecha, como en el diseno */
  align-self:start; padding-top:26px;
}
.hero__ambiente .frase-mano{
  font-size:28px;
  /* halo suave: la frase va sobre la foto, sin el no se lee */
  text-shadow:0 1px 10px rgba(255,249,242,.85), 0 0 26px rgba(255,249,242,.55);
}


/* ===========================================================================
   7-10 · TARJETAS DE CARACTERISTICAS
   =========================================================================== */
.tarjetas{ background:var(--blanco); padding:30px 0 42px; }

.tarjetas__in{ display:grid; gap:20px; grid-template-columns:repeat(4,minmax(0,1fr)); }

.tarjeta{
  display:flex; align-items:center; gap:14px;
  padding:19px 16px 19px 18px;
  background:var(--blanco);
  border:1px solid var(--borde); border-radius:var(--radio);
  box-shadow:0 6px 18px rgba(17,25,38,.05);
  transition:var(--trans);
}
.tarjeta:hover{ transform:translateY(-4px); border-color:#F6D9C2; box-shadow:0 16px 34px rgba(17,25,38,.10); }

.tarjeta__ico{
  display:grid; place-items:center;
  width:52px; height:52px; flex:0 0 52px;
  border-radius:50%;
  background:var(--naranja-claro); color:var(--naranja);
}
.tarjeta__ico .ico{ width:25px; height:25px; }

.tarjeta__txt{ flex:1 1 auto; min-width:0; }
.tarjeta__txt strong{ display:block; font-size:16px; font-weight:700; color:var(--titular); line-height:1.3; }
.tarjeta__txt em{ display:block; margin-top:3px; font-style:normal; font-size:13px; line-height:1.42; color:var(--texto-suave); }

.tarjeta__fin{ color:var(--texto-suave); transition:var(--trans); }
.tarjeta:hover .tarjeta__fin{ color:var(--naranja); transform:translateX(3px); }

/* ===========================================================================
   11, 12 · MUCHO MAS QUE UN TPV
   =========================================================================== */
.modulos{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--oscuro); color:#C9CDD3; padding:66px 0;
}
.modulos::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(20,22,23,.985) 0%, rgba(20,22,23,.96) 45%, rgba(20,22,23,.925) 100%),
    url('../img/fondo-oscuro.jpg') center/cover no-repeat;
}

.modulos__in{
  position:relative;
  display:grid; gap:38px;
  grid-template-columns:minmax(0,1fr) minmax(0,2.05fr);
  align-items:center;
}

.modulos__intro{ border-left:3px solid var(--naranja); padding-left:24px; }
.modulos__intro h2{ color:#fff; font-size:clamp(26px,2.3vw,34px); font-weight:700; margin-bottom:14px; }
.modulos__intro p{ font-size:15.5px; color:#A7ADB6; max-width:460px; }

.modulos__rejilla{ display:grid; gap:13px; grid-template-columns:repeat(4,minmax(0,1fr)); }

.modulo{
  display:flex; align-items:center; gap:11px;
  padding:17px 12px;
  background:var(--oscuro-2);
  border:1px solid var(--oscuro-borde); border-radius:var(--radio);
  color:#E6E8EB; font-size:13px; font-weight:500; line-height:1.25;
  transition:var(--trans);
}
.modulo .ico{ width:22px; height:22px; color:var(--naranja); }
.modulo:hover{ background:#2E3235; border-color:var(--naranja); transform:translateY(-3px); }

/* ===========================================================================
   13-17 · APP DE TOMA DE COMANDAS
   =========================================================================== */
.app{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--hueso); padding:58px 0 70px;
}
.app::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(250,247,244,.94) 0%, rgba(250,247,244,.80) 55%, rgba(250,247,244,.70) 100%),
    url('../img/fondo-claro.jpg') center/cover no-repeat;
}

.app__in{
  display:grid; gap:32px;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.05fr) minmax(0,1.45fr);
  align-items:center;
}

.app__img{ margin:0; }
.app__img img{ width:100%; }

.app__texto h2{ font-size:clamp(25px,2.2vw,32px); font-weight:700; margin-bottom:16px; }
.app__texto p{ font-size:16px; color:var(--texto); max-width:440px; }

.app__lateral{ display:flex; flex-direction:column; gap:22px; align-items:flex-start; }

.app__ventajas{ display:flex; flex-wrap:wrap; gap:20px; width:100%; }
.app__ventajas li{ display:flex; align-items:center; gap:9px; flex:1 1 0; min-width:0; }
.app__ventajas li + li{ border-left:1px solid #E5DFD8; padding-left:20px; }
.app__ventajas .ico{ width:26px; height:26px; color:var(--naranja); }
.app__ventajas strong{ display:block; font-size:14px; font-weight:700; color:var(--titular); line-height:1.25; }
.app__ventajas em{ display:block; font-style:normal; font-size:13.5px; color:var(--texto-suave); line-height:1.3; }

.app__lateral .frase-mano{ align-self:center; margin-top:6px; }

/* ===========================================================================
   PIE
   =========================================================================== */
.pie{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--oscuro); color:#9BA1AA; padding:56px 0 0;
}
.pie::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(18,20,21,.95) 0%, rgba(18,20,21,.985) 60%, rgba(18,20,21,1) 100%),
    url('../img/fondo-oscuro.jpg') center/cover no-repeat;
}

.pie__in{
  display:grid; gap:36px;
  grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,.8fr)) minmax(0,1.1fr);
}

.pie__logo{ width:210px; margin-bottom:16px; }
.pie__col p{ font-size:14.5px; line-height:1.65; }
.pie__col h4{ color:#fff; font-size:15px; font-weight:600; margin-bottom:14px; }
.pie__col ul li{ margin-bottom:9px; }
.pie__col ul a{ font-size:14.5px; transition:var(--trans); }
.pie__col ul a:hover{ color:var(--naranja); }

.pie__acceso{ margin-bottom:12px; font-size:14.5px; }
.pie__contacto{ margin-top:16px; }
.pie__contacto a{ display:inline-flex; align-items:center; gap:9px; font-size:14.5px; transition:var(--trans); }
.pie__contacto a:hover{ color:var(--naranja); }
.pie__contacto .ico{ width:19px; height:19px; color:var(--naranja); }

.pie__legal{ margin-top:46px; border-top:1px solid var(--oscuro-borde); padding:18px 0; }
.pie__legal .contenedor{ display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; font-size:13px; }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width:1180px){
  .hero__in{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .hero__ambiente{ display:none; }
  .tarjetas__in{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .modulos__in{ grid-template-columns:1fr; gap:34px; }
  .modulos__rejilla{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .app__in{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .app__lateral{ grid-column:1 / -1; }
  .app__ventajas{ max-width:620px; }
  .pie__in{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:1150px){
  .cab__nav{
    position:fixed; inset:72px 0 auto; z-index:59;
    background:#fff; border-bottom:1px solid var(--borde);
    box-shadow:0 20px 40px rgba(17,25,38,.12);
    max-height:0; overflow:hidden; transition:max-height .28s ease;
  }
  .cab__nav.es-abierto{ max-height:80vh; overflow:auto; }
  .cab__nav ul{ flex-direction:column; align-items:stretch; gap:0; padding:8px 24px 22px; }
  .cab__nav li{ border-bottom:1px solid var(--borde); }
  .cab__nav li:last-child{ border:0; }
  .cab__nav a{ display:block; padding:15px 0; font-size:16px; }
  .cab__nav a.es-activo::after{ display:none; }
  .cab__nav-cta{ display:block; padding-top:16px; }
  .cab__nav-cta a{ justify-content:center; }
  .cab__cta{ display:none; }
  .cab__burger{ display:flex; margin-left:auto; }

  /* En pantallas estrechas el texto ocupa todo el ancho: velo mas uniforme */
  .hero__fondo::after{
    background:linear-gradient(180deg,
      rgba(255,251,246,.94) 0%,
      rgba(255,249,242,.90) 50%,
      rgba(255,246,236,.84) 100%);
  }
  .hero{ padding:36px 0 30px; }
  .hero__in{ grid-template-columns:1fr; gap:30px; }
  .hero__tpv img{ width:100%; margin-left:0; }
  .modulos__rejilla{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .app__in{ grid-template-columns:1fr; }
  .app__img{ order:2; }
  .app__texto{ order:1; }
  .app__lateral{ order:3; }
}

@media (max-width:620px){
  .tarjetas__in{ grid-template-columns:1fr; }
  .modulos__rejilla{ grid-template-columns:1fr; }
  .hero__botones .btn{ width:100%; justify-content:center; }
  .app__ventajas{ gap:18px; }
  .app__ventajas li{ flex:1 1 100%; }
  .app__ventajas li + li{ border-left:0; padding-left:0; }
  .pie__in{ grid-template-columns:1fr; gap:28px; }
  .pie__legal .contenedor{ flex-direction:column; }
}

/* ===========================================================================
   PAGINAS INTERIORES (contenido legal y similares)
   =========================================================================== */
.interior{ padding:58px 0 70px; }
.interior h1{ font-size:clamp(28px,3vw,40px); font-weight:800; margin-bottom:20px; }
.interior p{ max-width:760px; font-size:16px; }
.interior__aviso{
  display:inline-block; margin-top:8px; padding:14px 18px;
  background:var(--naranja-suave); border:1px solid var(--naranja-claro);
  border-radius:var(--radio); color:var(--texto);
}